Tree viewPro
Folders and files with animated expand, indent guides and full tree keyboard support.
- src
- app
- layout.tsx2 KB
- page.tsx4 KB
- components
- lib
- package.json1 KB
- README.md3 KB
↑ ↓ to move, → to open, ← to close, Enter to select
When to use
- File explorers, nested navigation, org charts and category pickers.
When not to use
- Flat lists: use a list.
- Very large trees (thousands of nodes): virtualize.
Installation
Usage
Import it from @/components/ui/tree-view after installing.
example.tsx
import { TreeView, type TreeNode } from "@/components/ui/tree-view";
const files: TreeNode[] = [{ id: "src", name: "src", children: [{ id: "app", name: "app.tsx" }] }];
<TreeView aria-label="Project files" data={files} defaultExpanded={["src"]} onSelect={(node) => open(node.id)} />API reference
TreeView
A tree of nodes with expand and select. Folders toggle; leaves select.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | TreeNode[] | – | { id, name, icon?, children?, meta? }. |
| defaultExpanded | string[] | – | Ids open at first render. |
| selected / onSelect | string | null / (node) => void | – | Controlled selection. |
| aria-label | string | "Files" | Names the tree. |
Keyboard interactions
| Keys | Action |
|---|---|
| ↑or↓ | Previous or next visible item |
| → | Open a folder, or move into it |
| ← | Close a folder, or move to its parent |
| HomeorEnd | First or last item |
| EnterorSpace | Toggle a folder or select a file |
Accessibility
- Follows the WAI tree pattern: tree, treeitem and group roles with aria-level, aria-expanded and aria-selected.
- Roving tabindex: Tab enters the tree once.
Motion
- Folders open by animating height; chevrons rotate; the selection bar glides between items.
Responsive behavior
- Up to 320px by default; set className to fill a sidebar.
Performance
- Closed folders don't render their children.
Notes for AI
- Ids must be unique across the whole tree.
This page as Markdown, for assistants and coding agents:
/components/tree-view/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt