Tree View

Ready

Nested, keyboard-navigable hierarchy.

Installation

$ npx @oratiq-js/ui add tree-view

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

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

role=tree with aria-level/aria-expanded/aria-selected — announced as a real tree.
One tab stop (roving tabindex): Up/Down move; the arrow toward the reading direction expands or steps into children; the opposite one collapses or climbs to the parent — inverted automatically under RTL.
Enter/Space selects (and toggles branches); Home/End jump to the ends.
Indentation uses padding-inline-start and the chevron mirrors — the tree grows from the reading edge.

Prop	Type	Default	Description
`data`*	`{ id, label, icon?, children? }[]`	—	The tree.
`expanded / defaultExpanded`	`string[]`	—	Expanded branch ids (controlled / initial).
`selected / onSelectedChange`	`string`	—	Selection (controlled).
`showDefaultIcons`	`boolean`	`true`	Folder/file fallbacks when a node has no icon.

View source on GitHub → components/ui/tree-view.tsx