File Tree

Component 1.1K

About

A minimal, dark-themed file tree component with smooth expand/collapse animations, color-coded file icons, and subtle hover glow effects.

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";

const fileStructure = [
  {
    name: "src",
    type: "folder" as const,
    children: [
      {
        name: "components",
        type: "folder" as const,
        children: [
          { name: "button.tsx", type: "file" as const, extension: "tsx" },
          { name: "card.tsx", type: "file" as const, extension: "tsx" },
          { name: "input.tsx", type: "file" as const, extension: "tsx" },
        ],
      },
      {
        name: "hooks",
        type: "folder" as const,
        children: [
          { name: "use-theme.ts", type: "file" as const, extension: "ts" },
          { name: "use-auth.ts", type: "file" as const, extension: "ts" },
        ],
      },
      { name: "app.tsx", type: "file" as const, extension: "tsx" },
      { name: "index.tsx", type: "file" as const, extension: "tsx" },
    ],
  },
  {
    name: "public",
    type: "folder" as const,
    children: [
      { name: "logo.svg", type: "file" as const, extension: "svg" },
      { name: "favicon.png", type: "file" as const, extension: "png" },
    ],
  },
  { name: "package.json", type: "file" as const, extension: "json" },
  { name: "README.md", type: "file" as const, extension: "md" },
  { name: "styles.css", type: "file" as const, extension: "css" },
]

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center p-8">
      <div className="w-full max-w-xs">
        <FileTree data={fileStructure} />
      </div>
    </main>
  )
}