File Tree

Component

About

A collapsible folder/file hierarchy view for showing a project's directory structure, with optional badges to flag added or changed files.

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

import FileTree from "@/components/ui/file-tree";

// @example Collapsed folders | Set defaultOpen to false on a folder to start it closed.
export default function FileTreeCollapsedDemo() {
  return (
    <div className="flex items-center justify-center p-10 bg-white min-h-[320px]">
      <FileTree
        style={{ width: 280 }}
        data={[
          {
            name: "runbooks",
            children: [{ name: "refunds.md" }, { name: "outages.md" }],
          },
          {
            name: "node_modules",
            defaultOpen: false,
            children: [{ name: "react" }, { name: "react-dom" }],
          },
          {
            name: "tests",
            defaultOpen: false,
            children: [{ name: "refunds.test.ts" }],
          },
        ]}
      />
    </div>
  );
}