A file/directory tree rendered with real monospace box-drawing connectors (├── └── │) that redraw themselves as folders expand and collapse, with full keyboard navigation.
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>
);
}