# Editor Tabs

File tabs for editors: the active tab sits on the surface, and unsaved files carry a warning dot.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/editor-tabs
```

## Usage

```tsx
import { EditorTabs } from '@/components/fetaui/editor-tabs'

export function Example() {
  return <EditorTabs files={files} onClose={closeFile} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| files | EditorFile[] | required |
| value | string |  |
| defaultValue | string | first |
| onValueChange | (name) => void |  |
| onClose | (name) => void |  |
| label | string | Open files |
| animated | boolean | true |

## When to use

- File tabs in editors and code views.

## When not to use

- For views of one object: use Tabs.

## Accessibility

- Uses tablist, tab and tabpanel.
- The unsaved dot has a text equivalent.
- Each close mark names its file.

## Motion

- The panel fades and rises 8 px over 400 ms on first render.
- Lines fade in over 240 ms, 40 ms apart.
- The active plate slides between tabs.
- With reduced motion, everything appears in place.