Tree

An unstyled, accessible tree component with compound composition for hierarchical data.

Build fully custom tree views with complete control over layout and styling.

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 component API with sub-components: Root, List, Node, Content, Toggle, Icon, Label, Filter, Header, Footer, Empty
Three selection modes: single, multiple, and checkbox with parent-child propagation
Drag-drop reordering with scope validation for same-tree and cross-tree transfers
Built-in filtering with customizable filter input
Lazy loading support for on-demand node fetching

Usage#

import { Tree } from 'primereact/tree';

<Tree.Root>
    <Tree.Header>
        <Tree.Filter />
    </Tree.Header>
    <Tree.List>
        <Tree.Node>
            <Tree.Content>
                <Tree.Toggle />
                <Tree.Icon />
                <Tree.Label />
            </Tree.Content>
        </Tree.Node>
    </Tree.List>
    <Tree.Footer />
    <Tree.Empty />
</Tree.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Tree.Root as="nav">
    <Tree.List>
        <Tree.Node>
            <Tree.Content as="a">
                <Tree.Label />
            </Tree.Content>
        </Tree.Node>
    </Tree.List>
</Tree.Root>

Default elements: Root=div, List=ul, Node=li, Content=div, Toggle=button, Icon=span, Label=span, Filter=input, Header=div, Footer=div, Empty=div.

Render Function Children#

Content accepts a render function as children, providing access to the component instance. The instance exposes tree (root instance) and treenode (current node instance).

<Tree.Content>{(instance) => <div>Node is {instance.treenode?.state.expanded ? 'expanded' : 'collapsed'}</div>}</Tree.Content>

Pass Through#

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

/* 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.
`draggableNodes`	`boolean`	—
Whether the tree nodes can be dragged.
`droppableNodes`	`boolean`	—
Whether the tree can accept dropped nodes.
`draggableScope`	`string` \| `string[]`	—
A unique identifier for the draggable scope.
`droppableScope`	`string` \| `string[]`	—
A unique identifier for the droppable scope.
`validateDrop`	`boolean`	`false`
Whether to validate drops before processing.
`onToggle`	`(event: useTreeToggleEvent) => void`	—
Callback fired when a node is toggled.
`onExpand`	`(event: useTreeExpandEvent) => void`	—
Callback fired when a node is toggled.
`onCollapse`	`(event: useTreeCollapseEvent) => void`	—
Callback fired when a node is toggled.
`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.
`onNodeDrop`	`(event: useTreeNodeDropEvent) => void`	—
Callback fired when a node is dropped.
`onDragEnter`	`(event: useTreeDragEnterEvent) => void`	—
Callback fired when drag enters the tree.
`onDragLeave`	`(event: useTreeDragLeaveEvent) => void`	—
Callback fired when drag leaves the tree.
`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.
`onValueChange`	`(event: TreeRootValueChangeEvent) => void`	—
Callback fired when the tree's value 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-drag-hover`	Present when a node is being dragged over root

Defines passthrough(pt) options of Tree component.

label	type	description
root	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
list	TreeRootPassThroughType<HTMLAttributes<HTMLUListElement>>	Used to pass attributes to the list's DOM element.
node	TreeRootPassThroughType<HTMLAttributes<HTMLLIElement>>	Used to pass attributes to the node's DOM element.
content	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
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.
toggleIcon	TreeRootPassThroughType<SVGProps<SVGSVGElement>>	Used to pass attributes to the toggle icon's DOM element.
pcCheckbox	TreeRootPassThroughType<HTMLAttributes<HTMLInputElement>>	Used to pass attributes to the checkbox's DOM element.
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.
dropPoint	TreeRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the drop point's DOM element.

TreeList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeListInstance) => 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`	`TreeListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeListPassThrough>`	—
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: TreeListInstance) => 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`	`"list"`

Defines passthrough(pt) options of TreeList component.

label	type	description
root	TreeListPassThroughType<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.
`node`	`TreeNodeData`	—
Node data. See TreeNodeData interface for more information.
`index`	`number`	—
Index of the node in the list of siblings.
`draggableNodes`	`boolean`	—
Whether nodes can be dragged.
`droppableNodes`	`boolean`	—
Whether nodes can accept drops.
`draggableScope`	`string` \| `string[]`	—
Draggable scope identifier.
`droppableScope`	`string` \| `string[]`	—
Droppable scope identifier.
`validateDrop`	`boolean`	`false`
Whether to validate drops before processing.
`onNodeDrop`	`(event: TreeNodeDropEvent) => void`	—
Callback fired when a node is dropped on this node.
`onNodeDragEnter`	`(event: TreeNodeDragEnterEvent) => void`	—
Callback fired when drag enters this node.
`onNodeDragLeave`	`(event: TreeNodeDragLeaveEvent) => void`	—
Callback fired when drag leaves this node.
`onValueChange`	`(event: TreeNodeValueChangeEvent) => void`	—
Callback fired when the tree value 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`	`"node"`
`data-node-key`	Node key value
`data-expanded`	Present when node is expanded (non-leaf only)
`data-collapsed`	Present when node is collapsed (non-leaf only)
`data-selected`	Present when node is selected
`data-leaf`	Present when node is a leaf
`data-disabled`	Present when node is disabled

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 only)
`data-collapsed`	Present when collapsed (non-leaf only)
`data-leaf`	Present when leaf node
`data-checked`	Present when checked (checkbox mode)
`data-partial-checked`	Present when partially checked (checkbox mode)
`data-disabled`	Present when disabled
`data-drop-hover`	Present when a dragged node hovers over content

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 node is expanded
`data-collapsed`	Present when node is collapsed

Defines passthrough(pt) options of TreeToggle component.

label	type	description
root	TreeTogglePassThroughType<ButtonHTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.
toggleIcon	TreeTogglePassThroughType<SVGProps<SVGSVGElement>>	Used to pass attributes to the toggle icon's DOM element.

TreeIcon#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TreeIconInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TreeIconInstance) => 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`	`TreeIconInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TreeIconPassThrough>`	—
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: TreeIconInstance) => 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 TreeIcon component.

label	type	description
root	TreeIconPassThroughType<SVGAttributes<SVGElement>>	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.

Accessibility#

The root list element uses role="tree" while each list item uses role="treeitem" with aria-label, aria-selected, and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. Child containers use role="group". Toggle icons are hidden from screen readers as their parent treeitem element with its attributes is used instead. The aria-setsize, aria-posinset, and aria-level attributes are calculated implicitly and added to each treeitem.

Keyboard Support#

Key	Function
`tab`	Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the page tab sequence.
`shift` + `tab`	Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the page tab sequence.
`enter`	Selects the focused treenode.
`space`	Selects the focused treenode.
`down arrow`	Moves focus to the next treenode.
`up arrow`	Moves focus to the previous treenode.
`right arrow`	If node is closed, opens the node otherwise moves focus to the first child node.
`left arrow`	If node is open, closes the node otherwise moves focus to the parent node.