# Toolbar

A floating tool dock for canvas apps. It holds the current tool on an ink plate and redocks to any edge.

Tier: Free

## Installation

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

## Usage

```tsx
import { Toolbar } from '@/components/fetaui/toolbar'

export function Example() {
  return <div style={{ position: 'relative' }}><Toolbar tools={tools} /></div>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| tools | ToolbarEntry[] | required |
| value | string |  |
| defaultValue | string | first |
| onValueChange | (id) => void |  |
| dock | bottom, left, right, top |  |
| defaultDock | bottom, left, right, top | bottom |
| onDockChange | (edge) => void |  |
| label | string | Tools |
| animated | boolean | true |

## When to use

- For modal tools on a canvas, with one active at a time.
- Group tools by kind with a divider.

## When not to use

- For actions that do not change the mode, like export. Those go in the header.

## Accessibility

- Uses role toolbar, roving focus and aria-pressed.
- Every tool has a name and aria-keyshortcuts.

## Motion

- The ink plate slides between tools on a spring.
- Tooltips wait, then neighbours show at once.
- The flyout scales from the tool in 160 ms.
- Drag the grip and drop zones fade in. On release the dock flies to the nearest edge and reflows.
- With reduced motion, the plate jumps and the dock moves at once.