Components · primitive

Tree view. Branches that listen back.

A hierarchy primitive — folders, files, org charts, nested settings. Chevron rotation announces depth, arrow keys steer, and checkboxes propagate up and down the branch. Drag a node and the tree finds it a new home.

File tree · expand · select

Click a chevron to fold a branch. Use arrow keys for navigation; Enter selects.

Basic file tree

› ▸ framework
- › ▸ components
  - ··tree-view
  - ··code-block
  - ··avatar-stack
- › ▸ aurora
  - ··timeline.js
  - ··layers.js
··README.md2.1k

With guide rails

›▸surfaces
- ··galaxy
- ··nebula
- ›▸constellation
  - ··orion
  - ··aurora

Multi-select · checkbox propagation

Checking a parent ticks every child; partial selections render indeterminate.

›▸workspace
- ··read
- ··write
- ›▸admin
  - ··invite
  - ··delete

Drag to reorder

Pointer-driven rearrange. Drop indicator hugs the receiving edge.

·⋮Hero block
·⋮Feature grid
·⋮Pricing tiers
·⋮Testimonial wall
·⋮Footer

Org chart · vertical

Same data model, top-down arrangement. For roles, reporting lines, dependency graphs.

platform

framework

tokens

motion

surfaces

builder

canvas

panels

runtime

Usage

role="tree" on the container; role="treeitem" on each node.
aria-expanded toggles open state; the chevron rotates via CSS.
↑/↓ move focus, ←/→ collapse/expand, Enter selects.
For multi-select, add .tv-check inputs — parent state cascades.