File Tree

Component

About

A collapsible file/folder tree view with spring-animated folder expand/collapse, animated hover highlight, and automatic file-type icons based on extension.

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, type FileTreeElement } from "@/components/ui/file-tree";

const elements: FileTreeElement[] = [
  {
    id: "src",
    type: "folder",
    name: "src",
    children: [
      {
        id: "components",
        type: "folder",
        name: "components",
      },
      {
        id: "app",
        type: "folder",
        name: "app",
        defaultOpen: true,
        children: [
          { id: "app-layout", name: "layout.tsx", highlight: true },
          { id: "app-page", name: "page.tsx", highlight: true },
          {
            id: "api",
            type: "folder",
            name: "api",
          },
        ],
      },
      {
        id: "lib",
        type: "folder",
        name: "lib",
      },
      {
        id: "styles",
        type: "folder",
        name: "styles",
      },
    ],
  },
  {
    id: "public",
    type: "folder",
    name: "public",
  },
  {
    id: "config",
    type: "folder",
    name: "config",
  },
  { id: "readme", name: "README.md" },
];

export default function Example() {
  return (
    <div className="w-full max-w-sm">
      <FileTree elements={elements} defaultOpenIds={["src"]} />
    </div>
  );
}