Tree

Component 47

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>
    </>
  );
}