# Tree

Hierarchies in a Soft card: files, navigation with counts, checkboxes with parent states, and indent guides.

Tier: Free

## Installation

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

## Usage

```tsx
import { Tree, TreeCard } from '@/components/fetaui/tree'

export function Example() {
  return <TreeCard title="Explorer"><Tree label="Explorer" nodes={nodes} /></TreeCard>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| nodes | TreeNode[] | required |
| label | string | required |
| kind | files, navigation, checkbox, guides | files |
| expanded | string[] |  |
| defaultExpanded | string[] | [] |
| onExpandedChange | (ids) => void |  |
| selected | string |  |
| defaultSelected | string |  |
| onSelect | (id) => void |  |
| checked | string[] |  |
| defaultChecked | string[] | [] |
| onCheckedChange | (ids) => void |  |
| animated | boolean | true |

## When to use

- For nested data people expand and pick from.

## When not to use

- For a flat list: use Item.
- For a code project with git marks: use File Tree.

## Accessibility

- Uses tree and treeitem with aria-level, aria-expanded and aria-selected.
- One tab stop, with arrow keys inside.
- Checkbox parents report mixed.

## Motion

- Children fade in and settle 4 px over 240 ms, and the chevron turns.
- The card rises 8 px over 400 ms on first render.
- With reduced motion, rows appear in place.