Components
Loading preview...
A flexible tree view component with collapsible nodes, selection, and animations.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/treeimport { TreeProvider, Tree, TreeItem } from "@/components/ui/tree";
import { Folder,FileText } from "lucide-react"
export default function DemoOne() {
return (
<>
<TreeProvider className="w-full max-w-md">
<Tree>
<TreeItem nodeId="root" label="Project" icon={<Folder />} hasChildren>
<TreeItem nodeId="src" label="src" icon={<Folder />} level={1} hasChildren>
<TreeItem nodeId="components" label="components" icon={<Folder />} level={2} hasChildren>
<TreeItem nodeId="ui" label="ui" icon={<Folder />} level={3} hasChildren>
<TreeItem nodeId="button" label="button.tsx" icon={<FileText />} level={4} />
<TreeItem nodeId="tree" label="tree.tsx" icon={<FileText />} level={4} />
</TreeItem>
</TreeItem>
</TreeItem>
</TreeItem>
</Tree>
</TreeProvider>
</>
);
}