TreeView
v1.0.11Updated 27 Aug 2026Recursive tree of nested nodes with optional checkboxes / single / multi select, lazy loading, drag-and-drop reorder, search filter, and right-click context menu.
Preview
Live · 15 stories▸Why this is recommendedtreehierarchynesteddnd+7
The default, out-of-the-box TreeView.
- ✓File / folder browsers
- ✓Org charts
- ✓Category trees
- ✓Permission trees
- ✓Rows that need their own controls (edit / delete / expand-subtree buttons)
- Recursive nodes (expand / collapse)
- Selection modes: none / single / multi / checkbox
- Controlled OR uncontrolled expansion (expandedIds / onExpandedChange) — expand a whole subtree with no remount
- Reveal an externally-driven selection (revealSelected) — expands ancestors + scrolls the row into view on a content change of selectedIds ("reveal in explorer")
- unmountCollapsed — render only open subtrees so large trees (100s of nodes) expand/collapse without re-rendering everything
- Per-row action slot (renderRowActions) — component owns placement, event isolation and hover reveal (rowActionsVisibility)
- Truncated labels reveal full text on hover (native tooltip, measured on demand)
- Lazy load child nodes
- Drag-and-drop reorder (dnd-kit)
- Search / filter highlight
- Right-click context menu
- Card / flush visual variants
- i18n: labels prop overrides every built-in string (row arias, lazy-load states, search placeholder)
- ✕Flat lists (use DataTable / List)
- ✕Two-level menus (use SideNav)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
nodesRoot nodes
yesselectionSelection mode
—expandedIdsControlled expanded-node ids (pair with onExpandedChange). Omit for uncontrolled expansion seeded by defaultExpandedIds; lets a consumer expand/collapse a whole subtree in one update, no remount
—onExpandedChangeFires with the full expanded-id set on every expand / collapse
—revealSelectedOn a CONTENT change of selectedIds, expand every ancestor of the selection and scroll the first selected row into view ("reveal in explorer" for a search hit / deep link). Keyed on id content, not array identity, so an equal array on re-render does not re-open collapsed branches
—scrollBlockWhere a revealed row lands in the viewport (default 'nearest')
—unmountCollapsedRender only expanded subtrees so the DOM holds ~visible rows (open/close is instant, no height animation, cost scales with what is shown). Default false keeps every node mounted for the collapse animation. Recommended past a few hundred nodes
—renderRowActionsTrailing per-row action slot (edit / delete / expand-subtree …). Return null for no actions. Component owns placement after the truncating label, event isolation (no accidental select/expand/drag), and hover reveal
—rowActionsVisibilityWhen to reveal row actions. 'hover' (default) shows on row hover or keyboard focus within the row and reserves width when hidden; 'always' keeps them visible
—lazyLoadLazy child loader
—draggableEnable drag-and-drop
—searchableShow search filter
—labelsOverride any built-in UI string — row arias, lazy-load spinner/error/retry, search placeholder (i18n). Merged over DEFAULT_TREE_VIEW_LABELS; {token} templates
—