Tree Hinge Fold

Navigation

About

A keyboard-navigable file/folder tree view where each expanding branch swings open like a carpenter's folding rule around a hinged pivot, with rows unfolding in sequence and collapsing faster than they open.

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

Code

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

Usage.tsx

"use client";

import { FoldingRule, type RuleNode } from "@/components/ui/tree-hinge-fold";

const nodes: RuleNode[] = [
  {
    id: "src",
    label: "src",
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "button.tsx" },
          { id: "dialog", label: "dialog.tsx" },
          { id: "tabs", label: "tabs.tsx" },
        ],
      },
      { id: "lib", label: "lib" },
      { id: "index", label: "index.ts" },
    ],
  },
  { id: "scripts", label: "scripts" },
  { id: "package", label: "package.json" },
  { id: "readme", label: "README.md" },
];

export default function TreeHingeFoldDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-sm rounded-lg border border-border bg-surface p-4">
        <FoldingRule nodes={nodes} defaultExpanded={["src", "components"]} />
      </div>
    </div>
  );
}