File Tree

Component 47

About

A compound file tree with nested folder rows, extension-aware icons, keyboard navigation, hover highlighting, and single or multi-select for browsing file structures.

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

Code

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

Usage.tsx

"use client";

import {
  FileTree,
  FileTreeItem,
  FileTreeList,
} from "@/components/ui/file-tree";
import { File, FileText, Image } from "lucide-react";

export default function FileTreePreview() {
  return (
    <FileTree
      className="w-full max-w-sm"
      defaultExpandedIds={["documents", "projects", "project1"]}
      defaultSelectedId="index"
    >
      <FileTreeList>
        <FileTreeItem nodeId="documents" label="Documents" hasChildren>
          <FileTreeItem nodeId="projects" label="Projects" hasChildren>
            <FileTreeItem nodeId="project1" label="Project 1" hasChildren>
              <FileTreeItem nodeId="readme" label="README.md" icon={<FileText className="size-4.5" />} />
              <FileTreeItem nodeId="index" label="index.tsx" icon={<FileText className="size-4.5" />} highlight />
            </FileTreeItem>
          </FileTreeItem>
          <FileTreeItem nodeId="images" label="Images" hasChildren>
            <FileTreeItem nodeId="logo" label="logo.png" icon={<Image className="size-4.5" />} />
            <FileTreeItem nodeId="banner" label="banner.jpg" icon={<Image className="size-4.5" />} />
          </FileTreeItem>
        </FileTreeItem>
        <FileTreeItem nodeId="notes" label="notes.md" icon={<File className="size-4.5" />} />
      </FileTreeList>
    </FileTree>
  );
}