<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
npx shadcn@latest add @dotui/treeUsage
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>Anatomy
A Tree wraps TreeItems. Each TreeItem holds a TreeItemContent for its row — the expand chevron, optional checkbox and drag handle, and the label — and nests child TreeItems directly beneath it.
<Tree>
<TreeItem>
<TreeItemContent />
<TreeItem>
<TreeItemContent />
</TreeItem>
</TreeItem>
</Tree>Selection
Set selectionMode to single or multiple to make rows selectable. Control the selection with selectedKeys and onSelectionChange, typed as Selection from react-aria-components. Use disabledKeys to make specific rows non-interactive.
import { useState } from 'react'
import type { Selection } from 'react-aria-components'
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['report']))
<Tree
selectionMode="multiple"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
{items}
</Tree>Expansion
Set defaultExpandedKeys to expand parents by default (uncontrolled), or control which parents are open with expandedKeys and onExpandedChange.
<Tree defaultExpandedKeys={['documents']}>{items}</Tree>Links
Pass href to a TreeItem to render it as an <a>; add target for the link target. Client-side routing depends on your router setup.
<TreeItem href="/documents/report" textValue="Weekly report">
<TreeItemContent>Weekly report</TreeItemContent>
</TreeItem>Examples
Basic
File tree with icons
Drag and drop
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 7/15/2026