Tree view

A hierarchy to open, select from, and rearrange: TreeView over React Aria’s Tree with tri-state selection and drag and drop. Two sizes, three selection modes.

Demo

hero
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
size
selectionMode
import { Code02, File02, Folder } from "@untitledui/icons"; import { TreeView } from "@/components/application/tree-view/tree-view"; <TreeView aria-label="Project files" defaultExpandedKeys={["design","engineering","platform","marketing"]}> <TreeView.Item id="design" textValue="Design"> <TreeView.ItemContent icon={Folder}>Design</TreeView.ItemContent> <TreeView.Item id="guidelines" textValue="Brand guidelines.pdf"> <TreeView.ItemContent icon={File02}>Brand guidelines.pdf</TreeView.ItemContent> </TreeView.Item> <TreeView.Item id="components" textValue="Components.fig"> <TreeView.ItemContent icon={File02}>Components.fig</TreeView.ItemContent> </TreeView.Item> </TreeView.Item> <TreeView.Item id="engineering" textValue="Engineering"> <TreeView.ItemContent icon={Folder}>Engineering</TreeView.ItemContent> <TreeView.Item id="platform" textValue="Platform"> <TreeView.ItemContent icon={Folder}>Platform</TreeView.ItemContent> <TreeView.Item id="api-gateway" textValue="api-gateway"> <TreeView.ItemContent icon={Code02}>api-gateway</TreeView.ItemContent> </TreeView.Item> </TreeView.Item> <TreeView.Item id="mobile" textValue="Mobile app"> <TreeView.ItemContent icon={Code02}>Mobile app</TreeView.ItemContent> </TreeView.Item> </TreeView.Item> <TreeView.Item id="marketing" textValue="Marketing"> <TreeView.ItemContent icon={Folder}>Marketing</TreeView.ItemContent> <TreeView.Item id="launch-plan" textValue="Launch plan.docx"> <TreeView.ItemContent icon={File02}>Launch plan.docx</TreeView.ItemContent> </TreeView.Item> </TreeView.Item> </TreeView>

In context

in-context

Family

family
Design
Brand guidelines.pdf
Components.fig
TreeView
Marketing
Launch plan.docx
TreeView.Item
TreeView.ItemContent

Types

cells

The sheet's three Types at both sizes.

Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
Simple, size sm
Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
Simple, size md
Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
Folder only, size sm
Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
Folder only, size md
Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
Advanced, size sm
Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
Advanced, size md

Layouts

cells

Connectors

Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
showConnectors off: the indent is padding
Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
Marketing
Launch plan.docx
Lana Steiner
showConnectors on: a line, an elbow

Content

cells
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
icons on every row
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
no icons
Design
Brand
Brand guidelines.pdf
Components.fig
Olivia Rhye
People
Demi Wilkinson
Candice Wu
avatars in the icon slot
Design
Brand guidelines for the 2026 relaunch, final approved version.pdf
Components.fig
Olivia Rhye
a long label truncates at the column edge
Design2
Brand guidelines.pdf
Components.fig
Engineering2
Platform1
api-gateway
Mobile app
Marketing1
Launch plan.docx
a count in the action slot

Behaviour

cells

Expansion

everything collapsed, the default
Engineering
Platform
api-gateway
Mobile app
the path to api-gateway in defaultExpandedKeys
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
every folder in defaultExpandedKeys

Selection modes

Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
selectionMode none: a press opens a folder
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
selectionMode single: one row, the same checkbox
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
selectionMode multiple: the cascade, live

Drag and drop

Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
draggable off: nothing lifts
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
draggable with onMove: lift a row, land it

Loading

cells

Cells

Loading tree
level 1, size sm, chevron and checkbox real
Loading tree
level 2, size sm, chevron and checkbox real
Loading tree
level 1, size md, chevron and checkbox real
Loading tree
level 2, size md, chevron and checkbox real

A tree

Loading tree
three rows, size sm, levels cycled
Loading tree
three rows, size md, levels cycled

States

cells
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
hover and focus, live: arrow keys move focus
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
selected and indeterminate: api-gateway in defaultSelectedKeys
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
disabled: Marketing in disabledKeys
Design
Brand guidelines.pdf
Components.fig
Engineering
Platform
api-gateway
Mobile app
Marketing
Launch plan.docx
drop target, live: drag a row onto a folder