Tree View

Component 2

About

Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tree View to your project and fits it to your theme.

Code

How Tree View is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function TreeViewDemo() {
  return (
    <div className="w-full max-w-xs rounded-lg border p-2">
      <TreeView defaultValue="readme">
        <TreeItem value="src" label="src" defaultExpanded>
          <TreeItem value="components" label="components" defaultExpanded>
            <TreeItem value="button" label="button.tsx" />
            <TreeItem value="tree-view" label="tree-view.tsx" />
          </TreeItem>
          <TreeItem value="index" label="index.tsx" />
        </TreeItem>
        <TreeItem value="public" label="public">
          <TreeItem value="favicon" label="favicon.ico" />
        </TreeItem>
        <TreeItem value="readme" label="README.md" />
        <TreeItem value="package" label="package.json" />
      </TreeView>
    </div>
  );
}