## File Tree (S—120)

A collapsible file tree with indent guides, folder open/close animation and full arrow-key navigation.

- URL: https://sundaeui.dev/components/file-tree
- Category: Navigation & menus · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/file-tree.json`
- Tags: sidebar, tree, navigation, file-tree, explorer, folders

Folders expand with a height animation and a rotating chevron. Thin indent guides make depth readable, and the selected file is highlighted.
It follows the WAI-ARIA tree pattern: Up/Down move, Right opens or enters, Left closes or goes to the parent, Enter selects.

### Usage

```tsx
import { FileTree } from '@/components/sundae/file-tree'

<FileTree />
```

### Props

- `data` (`TreeNode[]`, required): Nodes: { id, name, children? }.
- `defaultExpanded` (`string[]`): Open folder ids.
- `onSelect` (`(id: string) => void`): Called when a file is selected.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Code viewers, docs sidebars, asset managers.

### When not to use

- Shallow lists: use a plain list.

### Accessibility

- role="tree" / "treeitem" / "group" with aria-expanded, aria-level and aria-selected.
- Roving tabindex: one item is tabbable at a time.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Previous / next item
- →: Open folder / first child
- ←: Close folder / parent
- Enter: Select