Tree View

npm install @radix-ui/react-collapsible lucide-react

import { TreeView, TreeItem, TreeItemGroup } from "@/components/ui/tree-view"

export function CustomTreeView() {
  const [openFolders, setOpenFolders] = React.useState<string[]>([])

  return (
    <div className="text-foreground font-mono">
      <TreeItem 
        isFolder 
        level={0}
        isOpen={openFolders.includes("docs")}
        onClick={() => toggleFolder("docs")}
      >
        docs
      </TreeItem>
      <TreeItemGroup open={openFolders.includes("docs")}>
        <TreeItem level={1}>README.md</TreeItem>
        <TreeItem level={1}>CONTRIBUTING.md</TreeItem>
        <TreeItem level={1} isLast>LICENSE</TreeItem>
      </TreeItemGroup>
    </div>
  )
}