About
A flexible tree view component with collapsible nodes, selection, and animations.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tree to your project and fits it to your theme.
Code
How Tree is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { 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>
</>
);
}