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 Badges | Mark the files an agent added or changed.
export default function FileTreeBadgesDemo() {
  return (
    <div className="flex items-center justify-center p-10 bg-white min-h-[320px]">
      <FileTree
        style={{ width: 280 }}
        data={[
          {
            name: "integrations",
            children: [
              { name: "intercom.ts", badge: "M" },
              { name: "linear.ts", badge: "New" },
              { name: "stripe.ts" },
            ],
          },
          { name: "README.md", badge: "M" },
        ]}
      />
    </div>
  );
}