TreeView

navigation

Collapsible hierarchical tree with expand/collapse chevrons, selection state, depth indentation, branch connector lines, and keyboard navigation. Token-driven styling.

Import

typescript
import { TreeView } from "packages/ui/src";

Props

TreeViewProps

PropTypeRequired
nodesTreeNode[]Yes
selectedstringNo
onSelect(id) => void, defaultExpanded?: string[]No

Examples

Tree View

Collapsible hierarchical tree with expand/collapse, selection, and depth indentation.

File Explorer

  • src
    • index.ts
  • README.md
  • package.json

Fully Expanded

  • src
    • components
      • Button.tsx
      • Card.tsx
      • Tabs.tsx
    • styles
      • globals.css
      • tokens.css
    • index.ts
  • tests
    • components.test.tsx
  • README.md
  • package.json

Metadata

Component Metadata
Familynavigation
FrameworksNext.js, Astro/EmDash
DescriptionCollapsible hierarchical tree with expand/collapse chevrons, selection state, depth indentation, branch connector lines, and keyboard navigation. Token-driven styling.
PropsTreeViewProps (nodes: TreeNode[], selected?: string, onSelect?: (id) => void, defaultExpanded?: string[])
Statesall-collapsed, partially-expanded, node-selected, deeply-nested
A11y
  • Root has role=tree with aria-label
  • Items have role=treeitem
  • Expandable items have aria-expanded
  • Selected items have aria-selected
  • Children groups have role=group
Responsive
  • Full-width by default
  • Indent scales with depth
Motion
  • Chevron rotation on expand
  • Background transition on hover
Token Dependencies
  • components.treeView.indentSize
  • components.treeView.itemPadding
  • components.treeView.itemBorderRadius
  • components.treeView.itemHoverBackground
  • components.treeView.itemSelectedBackground
  • components.treeView.labelColor
  • components.treeView.labelFontSize
  • components.treeView.iconColor
  • components.treeView.iconSize
  • components.treeView.branchLineColor
  • components.treeView.gap
Content Slotsnodes (TreeNode[]), icons (ReactNode[])
CMS Bindings
  • Tree data from CMS hierarchy
  • Expanded state from app
Test Cases
  • Renders root nodes
  • Has role=tree
  • Items have role=treeitem
  • Expand shows children
  • Selected item has selected class
  • Clicking calls onSelect
  • Default expanded works
  • Passes className through