Tree

A hierarchical treeview with explicit selection, retained expansion state, roving focus, and typeahead.@gemologic/sheen · navigation

Playground

label

selectionMode

Source
- App
README

<Tree label="Workspace" defaultExpandedValues={["src"]} selectionMode="single"><TreeItem value="src" label="Source"><TreeItem value="app" label="App" /></TreeItem><TreeItem value="readme" label="README" /></Tree>

Variant matrix

Workspace tree

Source
- App
README

selectionMode: none

Source
- App
README

selectionMode: single

Source
- App
README

selectionMode: multiple

Source
- App
README

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Tree.tsx

Tokens

--sheen-color-bg-hover
--sheen-color-bg-selected
--sheen-color-focus-ring
--sheen-space-inline-sm

Accessibility

Role: treeKeyboard: ArrowDown, ArrowUp, ArrowRight, ArrowLeft, Home, End, Enter, Space, *, typeahead

Do

Use stable unique values and preserve item ownership while labels or data refresh.
Keep focus, selection, expansion, and activation as separate states.

Do not

Do not use Tree for a flat list or remount it to publish refreshed data.

Generated props

Name	Type	Default	Description
`label` *	`string`	—	Required accessible name for the tree.
`selectionMode`	`TreeSelectionMode`	`single`	Whether items are unselectable, singly selected, or independently selected.
`selectedValues`	`readonly string[]`	—	Controlled stable item values selected by the app.
`defaultSelectedValues`	`readonly string[]`	—	Initially selected values for uncontrolled operation.
`onSelectionChange`	`(values: readonly string[]) => void`	—	Receives requested selection; controlled owners may reject it.
`expandedValues`	`readonly string[]`	—	Controlled stable branch values that expose their child groups.
`defaultExpandedValues`	`readonly string[]`	—	Initially expanded branch values for uncontrolled operation.
`onExpandedChange`	`(values: readonly string[]) => void`	—	Receives requested expansion; controlled owners may reject it.
`onActivate`	`(value: string) => void`	—	Handles Enter or the default item action without changing selection or focus.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.