Examples
Six recipes, each one running on the page.
Every example below is a live component, not a screenshot, and every one ships its complete source — imports included — so you can paste it into your app and have it work. Each ends with the gotcha that recipe exists to warn you about.
File picker
Select files across nested folders.
Per-extension icons and file sizes through renderItem, a running total from item.data, and the empty-directory trap that makes a folder checkable.
renderItemexpandedItemsonCheckPermissions matrix
Where the indeterminate state is the product.
Make indeterminate visually distinct from checked, badge each grant by risk, and serialize leaf grants so the server derives the rest.
renderCheckboxrenderItemestimateSizeshadcn/ui styled
Drop in the Radix checkbox and Lucide icons.
Swap in a Radix checkbox and a Lucide chevron without breaking the ARIA contract, including the indeterminate mapping people get wrong.
renderCheckboxrenderExpanderindentFaceted filter
A deep category tree wired to the URL.
A search box over a category tree, selected facets as removable chips, and a debounced write to the URL instead of one push per keystroke.
searchQueryminSearchCharsgetEngineEngine only
The headless core with a hand-written renderer.
Drop <Tree> entirely. Import the Engine from the /engine entry point, subscribe with useSyncExternalStore, and render the rows yourself.
EnginesubscribegetVisibleItemsPaged loading
Grow the tree as API pages arrive.
Grow the data prop as API pages land. Selection, expansion and the active query survive every swap — and there is no onLoadChildren to reach for.
dataonCheckonExpand
Looking for the prop-by-prop reference instead? <Tree> props lists every prop and its default, and Engine documents the headless core. Everything here is written against v0.2.0.