Tree

<TreedefaultExpanded={["src"]}selected={selected}onSelect={(node) => setSelected(node.id)}nodes={[  {    id: "src",    label: "src",    icon: IconFolder,    children: [      { id: "index", label: "index.ts", icon: IconCode, meta: "2.1 kB" },      { id: "worker", label: "worker.ts", icon: IconCode, meta: "8.4 kB" },    ],  },  { id: "readme", label: "README.md", icon: IconCode },]}/>

Tree renders a hierarchy from data. Indentation is drawn as a guide line per level rather than as padding, so at depth five you can still see which branch a row belongs to.

Rows are real buttons inside a tree role, so arrow keys and screen readers both work without anything extra from you.

Usage

import { Tree } from "@heyo-sh/heyo-ui";<Tree  nodes={nodes}  defaultExpanded={["src"]}  onSelect={(node) => open(node.id)}/>;

Branches and leaves

children decides what a node is. An array — even an empty one — makes a branch with a chevron, which is how an empty folder stays a folder. Leave it undefined for a leaf.

<TreedefaultExpanded={["bindings"]}nodes={[  {    id: "bindings",    label: "Bindings",    children: [      { id: "kv", label: "KV", meta: <Badge variant="count">2</Badge> },      { id: "r2", label: "R2", children: [] },    ],  },]}/>

Controlled expansion

expanded with onExpandedChange hands the open branches to you — the way to persist them, or to expand a path when a route changes.

const [expanded, setExpanded] = useState<string[]>(["src"]);<Tree nodes={nodes} expanded={expanded} onExpandedChange={setExpanded} />;

openIcon swaps the glyph for an open branch, which is how a closed folder and an open one end up looking different.

Properties

TreeNode