Pesto UI

Tree View

A nested, keyboard-navigable list of rows built from plain data, with expand/collapse chevrons and indent guides.

tsx
import { TreeView, type TreeNode } from "@pestoui/core"

Nested data

Pass a TreeNode[]. Rows with children get a chevron; defaultExpanded lists the ids open on mount.

Controlled selection

Arrow keys walk the visible rows, Left/Right collapse and expand, Enter or Space activates.

Selected: spreadsheets

Small, without guides

size="sm" tightens the rows for dense sidebars; showGuides={false} drops the vertical indent rules.

Props

PropTypeDefaultDescription
dataTreeNode[]—The tree, as plain data. TreeNode is { id, label, icon?, children? }.
defaultExpandedstring[]—Node ids expanded on first render. Expansion is uncontrolled after that.
selectedIdstring—Controlled selection. Omit to let the tree track the selected row itself.
onSelect(id: string) => void—Fires with the row id on click, Enter or Space.
showGuidesbooleantrueDraw the vertical indent guide beside each nested group.
size"default" | "sm""default"Row height and text size — 32px rows, or 28px for dense sidebars.
PreviousTooltipNext Trend Pill

Pesto UI · 117 documented components