Build · New

Tree View

Shows nested content, like folders of statements or a chart of accounts, and lets people open and close branches. Each level is indented one step; files sit under their folder.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/tree-view

Dependencies it brings: @phosphor-icons/react

Usage

import { TreeView } from "@/components/ui/tree-view";

<TreeView
  aria-label="Documents"
  items={[
    { id: "statements", label: "Statements", children: [{ id: "q1", label: "Q1 2026" }] },
    { id: "invoices", label: "Invoices", children: [] },
  ]}
  defaultExpanded={["statements"]}
/>

Examples

Controlled selection

selected and expanded from the page: picking a file opens it beside the tree. Icons are off (showIcons={false}).

API reference

TreeView

Prop	Type	Default	Description
`items`	`{ id, label, children? }[]`		The tree; an item with `children` is a branch, even when they're empty.
`expanded / defaultExpanded`	`string[]`		The open branches.
`onExpandedChange`	`(ids: string[]) => void`		Called when a branch opens or closes.
`selected / defaultSelected`	`string \| null`		The selected row.
`onSelectedChange`	`(id: string) => void`		Called when a row is selected.
`showIcons`	`boolean`	`true`	Figma's Show icon: the folder and file icons.
`aria-label`	`string`		The tree's name for screen readers.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Enters the tree once, on the selected row.
`ArrowDownArrowUp`	Between the visible rows.
`ArrowRight`	Opens a closed branch, or moves to its first child. ArrowLeft in Arabic.
`ArrowLeft`	Closes an open branch, or moves to the parent. ArrowRight in Arabic.
`HomeEnd`	To the first or last row.
`EnterSpace`	Selects the row.

ARIA

A named role="tree"; each row is a treeitem with aria-level, aria-setsize, aria-posinset, aria-expanded on branches and aria-selected.
Don't go deeper than four levels, and don't use a tree to move between app sections.

Arabic and RTL notes

Mirrors

Indents come from the right, a closed caret points left, and the selected bar sits on the right.
The open and close keys flip: ArrowLeft opens, ArrowRight closes.

Does not mirror

The folder and file icons.

Numerals: Numbers in labels stay as written.
Arabic typography: label-14 Regular; long labels truncate with an ellipsis.
Mixed-direction text: File extensions like .pdf reorder inside an Arabic label; drop them or put them in <bdi>.

All components ›