Tree Root Trace

Navigation

About

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.

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

Code

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

Usage.tsx

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