Tree

A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation and selection.

On this page

<Tree aria-label="Files" defaultExpandedKeys={["documents", "photos"]} className="w-72">
  <TreeItem id="documents" textValue="Documents">
    <TreeItemContent>Documents</TreeItemContent>
    <TreeItem id="project" textValue="Project">
      <TreeItemContent>Project</TreeItemContent>
      <TreeItem id="report" textValue="Weekly report">
        <TreeItemContent>Weekly report</TreeItemContent>
      </TreeItem>
    </TreeItem>
    <TreeItem id="resume" textValue="Resume.pdf">
      <TreeItemContent>Resume.pdf</TreeItemContent>
    </TreeItem>
  </TreeItem>
  <TreeItem id="photos" textValue="Photos">
    <TreeItemContent>Photos</TreeItemContent>
    <TreeItem id="one" textValue="Mountains.jpg">
      <TreeItemContent>Mountains.jpg</TreeItemContent>
    </TreeItem>
    <TreeItem id="two" textValue="Beach.jpg">
      <TreeItemContent>Beach.jpg</TreeItemContent>
    </TreeItem>
  </TreeItem>
</Tree>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/tree

Usage

Use a tree to display nested, hierarchical data such as a file system or category navigation. Each row is a TreeItem whose TreeItemContent holds the label; nested TreeItems become its children.

import { Tree, TreeItem, TreeItemContent } from '@/components/ui/tree'

<Tree
  aria-label="Files"
  selectionMode="single"
  defaultExpandedKeys={['documents']}
>
  <TreeItem id="documents" textValue="Documents">
    <TreeItemContent>Documents</TreeItemContent>
    <TreeItem id="report" textValue="Weekly report">
      <TreeItemContent>Weekly report</TreeItemContent>
    </TreeItem>
  </TreeItem>
</Tree>

When rendering data dynamically, pass items to the Tree and a Collection to each TreeItem for its children.

import { Collection } from 'react-aria-components'

<Tree aria-label="Files" items={items}>
  {function renderItem(item) {
    return (
      <TreeItem textValue={item.name}>
        <TreeItemContent>{item.name}</TreeItemContent>
        {item.children && (
          <Collection items={item.children}>{renderItem}</Collection>
        )}
      </TreeItem>
    )
  }}
</Tree>

Examples

API Reference

Tree

A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation and selection.

Prop	Type	Default
	`Iterable<Key>`	`—`
	`DragAndDropHooks<NoInfer<T>>`	`—`
	`Iterable<Key>`	`—`
	`"arrow" \| "tab"`	`'arrow'`

	`ReactNode \| function`	`—`
	`Iterable<T>`	`—`
	`function`	`—`
	`readonly any[]`	`—`

	`SelectionMode`	`—`
	`SelectionBehavior`	`'toggle'`
	`Iterable<Key> \| "all"`	`—`
	`Iterable<Key> \| "all"`	`—`
	`function`	`—`
	`Iterable<Key>`	`—`
	`DisabledBehavior`	`'all'`
	`boolean`	`—`
	`boolean`	`—`
	`"clearSelection" \| "none"`	`'clearSelection'`

TreeItem

A TreeItem represents an individual item in a Tree. It can contain a `TreeItemContent` for the row, along with nested `TreeItem`s as children.

Prop	Type	Default
	`ReactNode`	`—`
	`boolean`	`—`
	`Key`	`—`
	`boolean`	`—`
	`string`	`—`
	`T`	`—`

TreeItemContent

A TreeItemContent renders the contents of a TreeItem's row: the expand chevron, an optional selection checkbox and drag handle, and the item label.

Prop	Type	Default
	`ReactNode \| function`	`—`

Last updated on 6/27/2026

dotUI

Tree

Installation

Usage

Examples

Basic

Multiple selection

With icons

Dynamic items

Default expanded

Disabled items

Drag and drop

Empty state

API Reference

Tree

TreeItem

TreeItemContent