Tree Box Drawing

Navigation 18

About

A file/directory tree rendered with real monospace box-drawing connectors (├── └── │) that redraw themselves as folders expand and collapse, with full keyboard navigation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tree Box Drawing to your project and fits it to your theme.

Code

How Tree Box Drawing is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BoughIndex, type BoughNode } from "@/components/ui/tree-box-drawing";

const nodes: BoughNode[] = [
  {
    id: "src",
    label: "src",
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "button.tsx" },
          { id: "card", label: "card.tsx" },
          { id: "input", label: "input.tsx" },
        ],
      },
      {
        id: "lib",
        label: "lib",
        children: [{ id: "utils", label: "utils.ts" }],
      },
      { id: "app", label: "app.tsx" },
      { id: "index", label: "index.ts" },
    ],
  },
  { id: "package", label: "package.json" },
  { id: "readme", label: "readme.md" },
];

export default function TreeBoxDrawingDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <BoughIndex
        label="Project files"
        nodes={nodes}
        defaultExpandedIds={["src", "components"]}
      />
    </div>
  );
}