File Tree

Component

About

A collapsible folder/file tree view with guide lines connecting each node to its siblings and parent, for displaying hierarchical directory structures.

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 { Tree } from "@/components/ui/tree";

export default function TreeDemo() {
  return (
    <div
      className="w-full min-h-screen flex items-center justify-center p-10"
      style={{
        backgroundColor: "var(--eink-color-background)",
        color: "var(--eink-color-primary)",
      }}
    >
      <Tree>
        <Tree.Item label="src">
          <Tree.Item label="components">
            <Tree.Item label="button.tsx" />
            <Tree.Item label="card.tsx" />
          </Tree.Item>
          <Tree.Item label="utils">
            <Tree.Item label="cx.utils.ts" />
          </Tree.Item>
          <Tree.Item label="index.ts" />
        </Tree.Item>
        <Tree.Item label="package.json" />
        <Tree.Item label="README.md" />
      </Tree>
    </div>
  );
}