File Tree

Component 1

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 Nested | Folders nest to any depth.
export default function FileTreeNestedDemo() {
  return (
    <div className="flex items-center justify-center p-10 bg-white min-h-[320px]">
      <FileTree
        style={{ width: 280 }}
        data={[
          {
            name: "src",
            children: [
              {
                name: "agents",
                children: [
                  {
                    name: "alpha",
                    children: [
                      { name: "plan.ts" },
                      { name: "tools.ts", badge: "M" },
                    ],
                  },
                ],
              },
              { name: "index.ts" },
            ],
          },
        ]}
      />
    </div>
  );
}