## Magnify Dock (S—071)

A toolbar of icon tiles that swell toward the pointer, with a label above the nearest one and keyboard magnify.

- URL: https://sundaeui.dev/components/magnify-dock
- Category: Navigation & menus · Art direction: Playful
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/magnify-dock.json`
- Tags: magnify, macos, icons, toolbar, navigation, dock

Tiles grow with a cosine falloff around the pointer, so the nearest one peaks and its neighbours lean in. Sizes are worked out from the resting layout, so the swell never chases itself.
With the keyboard it is one toolbar: arrow keys move focus and the focused tile magnifies the same way. The selected tile turns solid and gets a dot underneath.

### Usage

```tsx
import { MagnifyDock } from '@/components/sundae/magnify-dock'

<MagnifyDock
  items={[{ id: 'home', label: 'Home', icon: <HomeIcon /> }, { id: 'search', label: 'Search', icon: <SearchIcon /> }]}
  onValueChange={navigate}
/>
```

### Props

- `items` (`DockItem[]`, required): id, label and a 20px stroke icon per tile.
- `magnification` (`number`, default `1.6`): Peak scale of the nearest tile.
- `reach` (`number`, default `90`): Pixels the swell spreads over.
- `value / defaultValue` (`string`): Selected item id.
- `onValueChange` (`(id: string) => void`): Called on select.
- `labels` (`'hover' | 'never'`, default `'hover'`): Show the label above the nearest tile.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- App launchers, playful site navs and creative tools with a handful of destinations.
- Floating toolbars on canvases.

### When not to use

- Touch-first layouts: there is no hover to magnify. Use a tab bar.
- More than about eight items, or items without clear icons.

### Accessibility

- role="toolbar" with roving focus; each tile is a labelled toggle button (aria-pressed for the selected one).
- Labels are visible on hover and focus, and always available as the accessible name.
- Reduced motion turns the swell off; the focused tile only grows slightly, without animation.

### Keyboard

- Tab: Focus the dock (selected tile)
- ← / →: Move between tiles
- Home / End: First or last tile
- Enter / Space: Select a tile

### FAQ

**Does it work on touch?**
It works, but there is nothing to magnify: touches select directly. The swell only follows a mouse.

**Why does the dock get wider?**
Tiles grow in place instead of overlapping, like the macOS dock. Leave about 40% extra room around it.