# Dock

> An animated dock for React and shadcn, with tiles that grow as the pointer nears them.

A magnifying dock: tiles grow with distance from the pointer on one spring while the row stays centred and the shelf widens. Labels follow after a short rest, a pressed tile bounces once, and keyboard focus magnifies too (Base UI Toolbar).

- Tier: Eased Pro
- Interaction: Hover
- Page: https://eased.dev/components/dock
- Installs: motion, @base-ui/react

## Install

Dock ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/dock
```

A magnifying dock: tiles grow with distance from the pointer while the row stays centred, and labels appear after a short rest. Built on Base UI Toolbar.

## When to use

- A launcher or mode switcher for a canvas, desktop-style or media app.
- A playful but quiet app bar with five to nine icons.

## When not to use

- Primary navigation with text labels: use Tabs or a sidebar.
- Touch-first layouts: magnification needs a fine pointer (touch still taps and bounces).

## Usage

```tsx example.tsx
import { Dock } from "@/components/eased/dock/dock";

export function Example() {
  return (
    <Dock
      aria-label="Apps"
      items={[
        { id: "inbox", label: "Inbox", icon: <InboxIcon />, badge: 3, active: true, onSelect: openInbox },
        { id: "calendar", label: "Calendar", icon: <CalendarIcon />, onSelect: openCalendar },
        "separator",
        { id: "settings", label: "Settings", icon: <SettingsIcon />, onSelect: openSettings },
      ]}
    />
  );
}
```

## API reference

### Dock

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `(DockItem \| "separator")[]` | | `{ id, label, icon, badge?, active?, onSelect? }`. |
| `size` | `number` | `44` | Tile size at rest, px. |
| `magnification` | `number` | `1.55` | Scale under the pointer. |
| `distance` | `number` | `3 × size` | Falloff radius, px. |
| `bounceOnSelect` | `boolean` | `true` | One launch bounce per press. |
| `aria-label` | `string` | `"Dock"` | Names the toolbar. |

Leave room above the dock: tiles grow upward by `(magnification − 1) × size`.

## Keyboard

| Key | Action |
|---|---|
| `Tab` | Focuses the dock (one tab stop); the focused tile magnifies and shows its label. |
| `←` / `→` | Move between tiles. |
| `Enter` / `Space` | Select. |

## Accessibility

- Base UI Toolbar: `role="toolbar"`, roving focus. Each tile is a button named by `label` (plus "3 new" with a badge).
- Labels are visual; the button names carry the same text.

## Motion

One pointer spring and one presence spring drive every tile's scale (raised-cosine falloff, origin at the bottom) and horizontal shift, computed together so the row stays centred; the shelf widens by `clip-path`. Nothing reflows and nothing re-renders as the pointer moves. Labels wait 260ms on first hover, then follow at once, entering in 200ms and leaving in 100ms. A press hops the tile up a third of its size and lands on the bouncy spring. Hover is gated to fine pointers. Reduced motion: no magnification, no bounce.

## Notes for AI

Use it for icon launchers where delight matters; keep it to under ten items and pass real `label`s. Size it with `size`, and reserve vertical room above it.

Do not animate width or wrap tiles in your own motion; magnification is already transform-only. Do not use it as the only navigation on touch devices.

## Related

- [Tooltip](/components/tooltip): labels for ordinary icon buttons.
- [Toggle Group](/components/toggle-group): a compact toolbar of toggles.