Tree
A hierarchical list of expandable, selectable rows — for project scopes, folder structures and nested taxonomies.
$
Registry itembunx shadcn@latest add @nx-ui/treeInstalls withutils
Project scopes
Data-driven mode: the whole tree from an `items` array, with leading icons, trailing status badges and a disabled branch.
Barrowfield regenerationLive
Demolition & strip-out
Soft strip
Structural demolitionOn hold
Earthworks & muck-away
Haulage & logistics
Millbrook transfer station
Multiple selection
Controlled selection with selectionMode multiple — Enter or click toggles each row; the tree is aria-multiselectable.
Barrowfield regenerationLive
Demolition & strip-out
Earthworks & muck-away
Bulk excavation
Soil remediation
Haulage & logistics
Millbrook transfer station
1 scope selected.
Site folder structure
Composable parts — Tree ▸ TreeItem ▸ TreeItemLabel ▸ TreeItemGroup — for full control over each row.
Wyke Common site
Environmental permitsApproved
Waste transfer notes
WTN-2024-Q4.pdf
WTN-2025-Q1.pdf
Site boundary.geojson
Without indentation guides
Pass showGuides={false} to drop the vertical guide lines for a flatter look.
Barrowfield regenerationLive
Millbrook transfer station
Feedstock intake
Processing lines
API reference
Exported parts and their props, extracted from the component source.