# File Tree

A file explorer: folders with chevrons, files with type icons, git marks and a selected row.

Tier: Free

## Installation

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

## Usage

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

export function Example() {
  return <FileTree files={[{ name: 'page.tsx', status: 'M' }]} onSelect={open} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| files | FileNode[] | required |
| title | string | Explorer |
| defaultExpanded | string[] | [] |
| selected | string |  |
| defaultSelected | string |  |
| onSelect | (path) => void |  |
| animated | boolean | true |

## When to use

- For a project of files.

## When not to use

- For other hierarchies: use Tree.

## Accessibility

- Built on Tree, so roles and keys come with it.
- Git marks are letters, so status is never colour alone.

## Motion

- Same as Tree. The header button opens every folder, or collapses back to the top level.
- With reduced motion, rows appear in place.