Tree view

A React component in Beamline's Navigation category.

Nested folders and records with the full tree keyboard model (arrows, Home/End, *, type to jump), depth guides, counts and animated opening.

Use it for

Nested hierarchies: files, folders, teams, categories.

Not for

Flat lists (item or table).

Anatomy

tree
row: chevron, icon, label, badge
depth guides
group

States

collapsed
expanded
focused
selected
disabled

Keyboard

↑ ↓ visible rows
Inline-end arrow opens/enters (Right in LTR, Left in RTL)
Inline-start arrow closes/returns to parent (Left in LTR, Right in RTL)
Home / End
* opens all siblings
type to jump
Enter / Space selects

Motion

Groups open and close by height over 200 ms; the chevron turns. The selected row's tint and rule are one plate that travels to the next row chosen (ui/lib/contour.ts); expanding or collapsing a branch places it without travel; a selected row inside a closed branch has no plate.

Props

Prop	Type	Default	Description
`nodes`	`{ id, label, icon?, badge?, disabled?, children? }[]`	—
`expandedIds / defaultExpandedIds / onExpandedChange`	`string[]`	—
`selectedId / defaultSelectedId / onSelect`	`string / (node) => void`	—
`aria-label`	`string`	—
`classNames`	`typed part classes`	—	See visualContract.slots; existing handlers, accessibility and internal measurement refs are preserved.
`style`	`CSSProperties`	—	Visual root inline styles.
`ref`	`HTMLUListElement`	—	Native visual root/control reference, composed with internal refs when present.

Dependencies

lucide-react

Import

import { TreeView } from "@/components/tree-view/tree-view";

Get it

Tree view is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent