Tree

Unstyled, accessible tree primitive with a compound API.

Unstyled compound primitive for rendering hierarchical data with full control over markup.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Tree with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound parts: Root, Nodes, Node, Content, Toggle, ToggleIndicator, Selection, DropIndicator, Label, Filter, Header, Footer, Empty, Loading
Flat DOM with a single <ul role="tree"> containing one <li role="treeitem"> per visible row
Selection modes single, multiple and checkbox with tri-state cascade
Drag-and-drop with a single onMove event; validateMove can be sync or async

Usage#

import { Tree } from 'primereact/tree';

<Tree.Root value={nodes}>
    <Tree.Header>
        <Tree.Filter />
    </Tree.Header>
    <Tree.Nodes>
        {({ node }) => (
            <Tree.Node uKey={node.key}>
                <Tree.Content>
                    <Tree.Toggle>
                        <Tree.ToggleIndicator match="expanded">▼</Tree.ToggleIndicator>
                        <Tree.ToggleIndicator match="collapsed">▶</Tree.ToggleIndicator>
                    </Tree.Toggle>
                    <Tree.Label>{node.label}</Tree.Label>
                </Tree.Content>
            </Tree.Node>
        )}
    </Tree.Nodes>
    <Tree.Footer />
    <Tree.Empty />
</Tree.Root>

Behavior#

Flat Render#

Tree.Nodes walks the data top-down and calls its render function once per visible row. Tree.Node looks the data up by uKey. Each <li> carries its depth in the --px-tree-node-level CSS variable (1-based); combine it with your own indent unit for indentation:

[data-part='content'] {
    margin-inline-start: calc((var(--px-tree-node-level, 1) - 1) * var(--p-tree-indent, 1rem));
}

Toggle Indicator#

Tree.Toggle renders no icon on its own. Add Tree.ToggleIndicator with match="expanded", match="collapsed" or match="always" inside to render per-state content. For leaf rows the toggle is replaced by <span data-part="toggle-spacer"> so the indentation stays aligned.

Selection#

Tree.Selection is render-prop based. Inside Tree.Node it exposes isSelected, isPartiallySelected and toggle. Inside Tree.Header it exposes isAllSelected, isSomeSelected and toggleAll. Pass mode="radio" | "checkbox" | "single" to force a specific toggle behavior.

Polymorphism#

Every sub-component takes an as prop. Pass another element or component to swap the rendered tag.

Defaults: Root=div, Nodes=ul, Node=li, Content=div, Toggle=button, ToggleIndicator=span, Selection=Fragment, DropIndicator=div, Label=span, Filter=input, Header=div, Footer=div, Empty=div, Loading=div.

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Pass Through Sections

Hover or click to explore component parts

/* Select a part to see its CSS selector for custom styling */

API#

TreeRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`TreeNodeData[]`	—
An array of treenodes.
`expandedKeys`	`TreeExpandedKeys`	—
A record of keys to represent the state of the tree expansion state in controlled mode.
`defaultExpandedKeys`	`TreeExpandedKeys`	—
The default expanded keys when used in uncontrolled mode.
`selectionKeys`	`TreeSelectionKeys` \| `TreeCheckboxSelectionKeys`	—
A record of keys to represent the selection state in controlled mode. For single/multiple mode: Record<string, boolean> For checkbox mode: Record<string, { checked: boolean, partialChecked: boolean }>
`defaultSelectionKeys`	`TreeSelectionKeys` \| `TreeCheckboxSelectionKeys`	—
The default selected keys when used in uncontrolled mode.
`selectionMode`	`"checkbox"` \| `"multiple"` \| `"single"`	—
Defines the selection mode.
`metaKeySelection`	`boolean`	`false`
Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect multiple items. When set to false selection of each item can be toggled individually.
`highlightOnSelect`	`boolean`	`false`
Highlights automatically the first item.
`draggable`	`boolean`	—
Whether the tree nodes can be dragged.
`droppable`	`boolean`	—
Whether the tree can accept dropped nodes.
`draggableScope`	`string` \| `string[]`	—
Identifier(s) attached to nodes dragged out of this tree. Other trees use this value to decide whether they accept the drop (see `droppableScope` ). Accepts a string or an array of strings.
`droppableScope`	`string` \| `string[]`	—
Scope(s) this tree accepts drops from. A drop is allowed when the dragged node's `draggableScope` overlaps with this value. Accepts a string or an array of strings. When omitted, drops from any scope are accepted.
`onToggle`	`(event: useTreeToggleEvent) => void`	—
Callback fired when a node is toggled (expanded or collapsed).
`onExpand`	`(event: useTreeExpandEvent) => void`	—
Callback fired when a node is expanded.
`onCollapse`	`(event: useTreeCollapseEvent) => void`	—
Callback fired when a node is collapsed.
`onClick`	`(event: useTreeClickEvent) => void`	—
Callback fired when a node is clicked.
`onSelect`	`(event: useTreeSelectEvent) => void`	—
Callback fired when a node is selected.
`onUnselect`	`(event: useTreeUnselectEvent) => void`	—
Callback fired when a node is unselected.
`onMove`	`(event: useTreeMoveEvent) => void`	—
Callback fired when a drag-and-drop move completes. Receives the updated tree value plus move metadata.
`validateMove`	`(event: useTreeMoveEvent) => boolean` \| `Promise<boolean>`	—
Optional validator invoked before a move is committed. Return `false` (sync or async) to cancel the move.
`onFocusedKeyChange`	`(event: useTreeFocusedKeyChangeEvent) => void`	—
Callback fired when the focused key changes (keyboard navigation).
`loading`	`boolean`	—
Displays a loading overlay over the tree. Pair with `Tree.Loading` to render the spinner / message of your choice.
`onExpandedChange`	`(event: TreeRootExpandedChangeEvent) => void`	—
Callback fired when the tree's expanded keys state changes.
`onSelectionChange`	`(event: TreeRootSelectionChangeEvent) => void`	—
Callback fired when the tree's selection keys state changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"root"`
`data-dragover`	Present while a compatible drag is over the container

Defines passthrough(pt) options of Tree component.

label	type	description
root	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
nodes	TreeRootPassThroughType<HTMLAttributes<HTMLUListElement>>	Used to pass attributes to the flat iterator's DOM element ( `<ul role="tree">` ).
node	TreeRootPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the node's DOM element ( `<li>` ).
content	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element (clickable row).
label	TreeRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the label's DOM element.
toggle	TreeRootPassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the toggle button's DOM element.
toggleIndicator	TreeRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the toggle indicator's DOM element (state-matched icon slot).
toggleSpacer	TreeRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the toggle spacer rendered for leaf nodes.
selection	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the selection slot (wraps user-provided checkbox/radio).
pcFilter	TreeRootPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the filter's DOM element.
header	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the header's DOM element.
footer	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the footer's DOM element.
empty	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the empty message's DOM element.
dropIndicator	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the drop indicator's DOM element.
loading	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the loading overlay's DOM element.

TreeNodes#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeNodesInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeNodesInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeNodesInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeNodesPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeNodesInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`ReactNode` \| `((row: TreeNodeRow) => ReactNode)`	—
Render-prop invoked once per visible node. Receives a `TreeNodeRow` payload carrying the node data plus its position and state in the tree.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"nodes"`
`role`	`"tree"`

Defines passthrough(pt) options of TreeNodes component.

label	type	description
root	TreeNodesPassThroughType<HTMLAttributes<HTMLUListElement>>	Used to pass attributes to the root's DOM element.

TreeNode#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeNodeInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeNodeInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeNodeInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeNodePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeNodeInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`uKey`	`string`	—
The key of the node to render. Looked up in the parent `Tree.Root` 's `nodeMap` . If the key is unknown (or omitted) a placeholder with `aria-busy` is rendered and a dev-mode warning is emitted.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"node"`
`data-node-key`	Node key
`data-expanded`	Present when expanded (non-leaf)
`data-collapsed`	Present when collapsed (non-leaf)
`data-selected`	Present when selected
`data-leaf`	Present when leaf
`data-disabled`	Present when disabled
`data-focused`	Present on the focused row

Defines passthrough(pt) options of TreeNode component.

label	type	description
root	TreeNodePassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the root's DOM element.

TreeContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"content"`
`data-selected`	Present when selected or checked
`data-selectable`	Present when selectable
`data-expanded`	Present when expanded (non-leaf)
`data-collapsed`	Present when collapsed (non-leaf)
`data-leaf`	Present when leaf
`data-checked`	Present when checked (checkbox mode)
`data-partial-checked`	Present when partially checked
`data-disabled`	Present when disabled
`data-dragover`	Present while a compatible drag is over it

Defines passthrough(pt) options of TreeContent component.

label	type	description
root	TreeContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TreeToggle#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeToggleInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeToggleInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeToggleInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeTogglePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeToggleInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"toggle"`
`data-expanded`	Present when expanded
`data-collapsed`	Present when collapsed

For leaf nodes the toggle is replaced by <span data-part="toggle-spacer" aria-hidden>.

Defines passthrough(pt) options of TreeToggle component.

label	type	description
root	TreeTogglePassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

TreeToggleIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeToggleIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeToggleIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`ReactNode`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeToggleIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeToggleIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeToggleIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`match`	`"always"` \| `"expanded"` \| `"collapsed"`	—
Determines the visibility of the indicator based on the toggle state. - "expanded": Visible when the node is expanded. - "collapsed": Visible when the node is collapsed. - "always": Indicator is always visible (useful for loading spinners).
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"toggle-indicator"`

Defines passthrough(pt) options of TreeToggleIndicator component.

label	type	description
root	TreeToggleIndicatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

TreeSelection#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeSelectionInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeSelectionInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeSelectionInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeSelectionPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeSelectionInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`mode`	`"checkbox"` \| `"radio"` \| `"single"`	—
Override the toggle mode used inside the render-prop. - 'radio': select only one node, no deselect on re-click. - 'checkbox': tri-state with cascade propagation. - 'single': select one node, deselect on re-click. When omitted, defaults to `'single'` for `selectionMode="single"` , `'checkbox'` for `selectionMode="checkbox"` , otherwise `'checkbox'` .
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Render-prop only; no DOM attributes of its own.

Defines passthrough(pt) options of TreeSelection component.

label	type	description
root	TreeSelectionPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TreeDropIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeDropIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeDropIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeDropIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeDropIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeDropIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`position`	`"after"` \| `"before"`	—
Which drop point this indicator represents. Render two siblings of `Tree.Content` — one with `position="before"` and one with `position="after"` . Each renders only while its respective drop point is active.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Renders only while the matching drop point is hovered. Use one with position="before" and one with position="after" per Tree.Node.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"drop-point"`

Defines passthrough(pt) options of TreeDropIndicator component.

label	type	description
root	TreeDropIndicatorPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TreeLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TreeLabel component.

label	type	description
root	TreeLabelPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

TreeFilter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeFilterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeFilterInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeFilterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeFilterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeFilterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"filter"`

Defines passthrough(pt) options of TreeFilter component.

label	type	description
root	TreeFilterPassThroughType<HTMLAttributes<HTMLElement>>	Used to pass attributes to the root's DOM element.

TreeHeader#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeHeaderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeHeaderInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeHeaderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeHeaderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeHeaderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TreeHeader component.

label	type	description
root	TreeHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TreeFooter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeFooterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeFooterInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeFooterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeFooterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeFooterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TreeFooter component.

label	type	description
root	TreeFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TreeEmpty#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeEmptyInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeEmptyInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeEmptyInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeEmptyPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeEmptyInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TreeEmpty component.

label	type	description
root	TreeEmptyPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TreeLoading#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeLoadingInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeLoadingInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TreeLoadingInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeLoadingPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TreeLoadingInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Renders only while Tree.Root.loading is true. Use it as a sibling of Tree.Nodes.

Attribute	Value
`data-scope`	`"tree"`
`data-part`	`"loading"`
`role`	`"status"`

Defines passthrough(pt) options of TreeLoading component.

label	type	description
root	TreeLoadingPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

The flat <ul role="tree"> contains one <li role="treeitem"> per visible row. Each row carries aria-level, aria-posinset and aria-setsize. Non-leaf rows set aria-expanded. In selectionMode="checkbox", aria-checked is true, false or "mixed".

Keyboard Support#

Key	Function
`tab` / `shift` + `tab`	Enter / leave the tree.
`enter` / `space`	Toggle selection on the focused node.
`down arrow`	Move focus to the next visible row.
`up arrow`	Move focus to the previous visible row.
`right arrow`	Expand the focused node, or step into its first child.
`left arrow`	Collapse the focused node, or step out to its parent.
`home` / `end`	Jump to the first / last visible row.
Printable characters	Type-ahead by label (500 ms reset).