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 Default | Folders have children. Files do not.
export default function FileTreeDemo() {
  return (
    <div className="flex items-center justify-center p-10 bg-white min-h-[320px]">
      <FileTree
        style={{ width: 280 }}
        data={[
          {
            name: "agents",
            children: [
              { name: "alpha.config.ts" },
              { name: "refund-policy.md" },
            ],
          },
          {
            name: "integrations",
            children: [{ name: "intercom.ts" }, { name: "stripe.ts" }],
          },
          { name: "package.json" },
        ]}
      />
    </div>
  );
}