An animated file/nav tree whose indentation guides are SVG paths that draw downward and branch into child rows as nodes expand, instead of static border-left lines.
"use client";
import TreeRootTrace from "@/components/ui/tree-root-trace";
const nodes = [
{
id: "src",
label: "src",
children: [
{
id: "components",
label: "components",
children: [
{ id: "button", label: "button.tsx" },
{ id: "input", label: "input.tsx" },
{ id: "tree-root-trace", label: "tree-root-trace.tsx" },
],
},
{
id: "hooks",
label: "hooks",
children: [{ id: "use-tree", label: "use-tree.ts" }],
},
{ id: "app", label: "App.tsx" },
],
},
{
id: "public",
label: "public",
children: [{ id: "favicon", label: "favicon.ico" }],
},
{ id: "package", label: "package.json" },
{ id: "readme", label: "README.md" },
];
export default function TreeRootTraceDemo() {
return (
<div className="w-full max-w-sm rounded-lg border border-border bg-background p-4">
<TreeRootTrace
label="Project files"
nodes={nodes}
defaultExpandedIds={["src", "components"]}
/>
</div>
);
}