Folder Tree

Navigation 10

About

A collapsible folder/file tree component for displaying hierarchical data with expandable nodes, selection, keyboard navigation, and file/folder icons.

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

Code

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

Usage.tsx

import FolderTree from "@/components/ui/folder-tree";

export default function FolderTreeDemo() {
  return (
    <div className="w-full max-w-sm">
      <FolderTree.Root
        defaultExpanded={["root", "folder1"]}
        defaultSelected="file1"
        className="w-full"
      >
        <FolderTree.Item id="root" label="Root Folder">
          <FolderTree.Content>
            <FolderTree.Item id="folder1" label="Documents">
              <FolderTree.Content>
                <FolderTree.Item id="file1" label="File 1.txt" />
                <FolderTree.Item id="file2" label="File 2.txt" />
                <FolderTree.Item id="file3" label="Image.png" />
              </FolderTree.Content>
            </FolderTree.Item>
          </FolderTree.Content>
        </FolderTree.Item>
      </FolderTree.Root>
    </div>
  );
}