# Tree view

> Folders and files with animated expand, indent guides and full tree keyboard support.

Component · Pro · https://lodeui.com/components/tree-view

## 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

```bash
npx shadcn@latest add @lode/tree-view
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| ↑ / ↓ | Previous or next visible item |
| → | Open a folder, or move into it |
| ← | Close a folder, or move to its parent |
| Home / End | First or last item |
| Enter / Space | 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.

## Related

- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.
- [Context menu](https://lodeui.com/components/context-menu) — Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.