# Tree View

A file tree with guides, inline renaming and the selected path in the footer.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/tree-view
```

## Usage

```tsx
import { TreeView } from '@/components/fetaui/tree-view'

export function Example({ nodes }) {
  return <TreeView label="Files" heading="EXPLORER" nodes={nodes} onSelect={(id, path) => open(path)} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | string | required |
| nodes | TreeNode[] | required |
| heading | string |  |
| defaultExpanded | string[] | top level folders |
| defaultSelected | string |  |
| onSelect | (id, path) => void |  |
| onRename | (id, name) => void |  |
| onAdd | () => void |  |
| animated | boolean | true |

## When to use

- For files and nested navigation.

## When not to use

- When rows have columns: use Tree Table.

## Accessibility

- Uses tree and treeitem with aria-level, aria-expanded and aria-selected.
- One roving tab stop.
- Git marks are labelled.

## Motion

- Chevrons turn 90° over 240 ms.
- Hover washes 4% and selection 8%.
- With reduced motion, chevrons swap at once.