Tree

Interactive

See Tree in Storybook for every variant, with live controls.

A nested, expandable hierarchy — file trees, resource graphs, nested config.

import { Tree } from "@kairosis/eidos";

<Tree
  nodes={[
    {
      id: "src",
      label: "src",
      children: [{ id: "index", label: "index.ts" }],
    },
  ]}
  defaultExpanded={["src"]}
  selectedId={selected}
  onSelect={setSelected}
/>;

Props

Prop	Type	Default	Description
nodes	TreeNode[]	—	Required
selectedId	string	—
onSelect	(id: string) => void	—
defaultExpanded	string[]	[]	Node ids open on first render

TreeNode is { id, label, icon?, count?, children? } and recurses.

Keyboard

The tree is a single tab stop, entered at the selected node. ↑/↓ move through the visible nodes; → expands a closed branch or steps into an open one; ← collapses an open branch or steps out to the parent. Home/End jump to the first and last visible node.

Guidelines

• Expansion state is internal (uncontrolled) — seed it with defaultExpanded.
• Clicking a branch both expands it and selects it. Leaves only select.
• Without an explicit icon, branches get a folder (open or closed) and leaves get a file.
• Nodes are real buttons and carry aria-expanded/aria-selected.
• Indentation is driven by a --tree-depth custom property, so the DOM stays flat rather than nesting a wrapper per level.