Tree view

Navigate nested folders and structured content.

import { TreeView, type TreeNode } from "@/forma/arc/tree-view/tree-view";

Base

In FORMA

Liegt in kit/arc/tree-view und ist über @/forma/arc/tree-view/tree-view erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

Files, folders, and nested categories people expand and select.
Side panels next to code-block or a detail view where selection drives content.
Hierarchies that need full keyboard navigation with arrow keys.

When not to use

Use accordion for a few collapsible sections of content.
Use breadcrumb to show the path to the current page.

Usage

import { TreeView, type TreeNode } from "@/forma/arc/tree-view/tree-view";

const files: TreeNode[] = [
  { id: "app", label: "app", children: [
    { id: "page", label: "page.tsx" },
    { id: "layout", label: "layout.tsx" },
  ] },
  { id: "readme", label: "README.md" },
];

export function Files() {
  return <TreeView nodes={files} defaultExpandedIds={["app"]} onSelect={node => open(node.id)} />;
}

API reference

TreeView

A keyboard navigable file tree with animated expand and a gliding selection.

Prop	Type	Default	Description
`nodes` (required)	`{ id: string; label: string; children?: TreeNode[]; icon?: ReactNode }[]`	–	Root nodes. Nodes with children are folders.
`defaultExpandedIds`	`string[]`	`[]`	Folders open on first render when uncontrolled.
`expandedIds`	`string[]`	–	Controlled open folders.
`onExpandedChange`	`(expandedIds: string[]) => void`	–	Called with the new open set.
`onSelect`	`(node: TreeNode) => void`	–	Called when a row is clicked or activated.
`aria-label`	`string`	`"File tree"`	Accessible name for the tree.

Keyboard interactions

Keys	Action
ArrowDown / ArrowUp	Moves to the next or previous visible row.
ArrowRight	Opens a folder, or moves to its first child if open.
ArrowLeft	Closes an open folder, or moves to the parent.
Home / End	Moves to the first or last visible row.
Enter / Space	Selects the row and toggles a folder.

Accessibility

Uses role="tree" and role="treeitem" with aria-level, aria-posinset, aria-setsize, aria-expanded, and aria-selected.
Roving tabindex keeps one row in the tab order.
Icons, chevrons, and branch lines are aria-hidden.

Motion

Opening a folder grows the space and staggers its children in; closing collapses rows smoothly.
The selection highlight glides between rows and the chevron rotates on a snappy spring.
Reduced motion shows and hides rows instantly.

Responsive behavior

Rows are a fixed 36px and labels ellipsize, so deep paths clip rather than overflow on narrow panels.
Each level indents 18px, so very deep trees lose label space on mobile.
Hover highlights apply only on hover-capable fine pointers.

Performance

Every visible row renders with position layout animation; nodes are not virtualized, so keep open folders reasonable.
Closed folders do not render their children.

Notes for AI

Use for hierarchical data such as files or nested categories. Use accordion for a few collapsible sections of content.
IDs must be unique across the whole tree. Control expandedIds when the open set must persist or sync with routing.

Also in tables

Sortable data table: Compare structured records with sortable columns.
Reorderable list: Organize items with direct drag and drop.
Filter toolbar: Keep collection filters close and easy to reset.
JSON viewer: A collapsible JSON tree with search, paging for long arrays, and copy value or path.

Guidance for AI tools

Tree view: Navigate nested folders and structured content. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückEmpty state WeiterPagination

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.