# Dock

> macOS-style dock whose icons magnify under the pointer, with tooltips, badges and active dots.

Component · Pro · https://lodeui.com/components/dock

## When to use

- A launcher of 4–10 top-level destinations or tools, like an app switcher.
- Playful navigation on marketing pages and portfolios.

## When not to use

- Primary navigation of a dense app: use a sidebar or tabs.
- Touch-first screens: magnification needs a mouse (the dock still works, just without the effect).

## Installation

```bash
npx shadcn@latest add @lode/dock
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Home, Mail, Settings } from "lucide-react";
import { Dock } from "@/components/ui/dock";

export function AppDock() {
  return (
    <Dock
      aria-label="Apps"
      items={[
        { id: "home", label: "Home", icon: <Home />, href: "/", active: true },
        { id: "mail", label: "Mail", icon: <Mail />, href: "/mail", badge: 3 },
        { type: "separator", id: "sep" },
        { id: "settings", label: "Settings", icon: <Settings />, onSelect: () => openSettings() },
      ]}
    />
  );
}
```

## API reference

### Dock

A nav of icon buttons or links that magnify near the pointer.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `(DockItem \| { type: "separator"; id })[]` | – | DockItem: { id, label, icon, href?, onSelect?, active?, badge? }. |
| size | `number` | `44` | Resting icon tile size in px. |
| magnification | `number` | `68` | Tile size directly under the pointer. |
| distance | `number` | `140` | How far the effect reaches either side, in px. |
| aria-label | `string` | `"Dock"` | Names the navigation landmark. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between icons; the label appears on focus |
| Enter | Open the focused item |

## Accessibility

- A nav landmark of real links or buttons, each named by its label (and badge count).
- Active links set aria-current="page"; active buttons set aria-pressed.
- Labels show as tooltips on hover and on keyboard focus.

## Motion

- Each tile springs between its size and the magnified size based on pointer distance (stiffness 170, damping 12).
- Tooltips fade up in 150ms.
- No magnification under reduced motion.

## Responsive behavior

- Shrinks its icons (down to 28px) so every item fits narrow containers like a 375px phone.
- Touch input skips magnification, so taps land where expected.

## Performance

- Pointer position is a motion value; tiles update without React re-renders.

## Notes for AI

- Give every item a label; it is the accessible name and the tooltip.
- Use href for navigation and onSelect for actions, not both.

## Related

- [Expandable tabs](https://lodeui.com/components/expandable-tabs) — Icon tabs where the selected one grows to reveal its label.
- [Tooltip](https://lodeui.com/components/tooltip) — A small label on hover or focus, with a delay that respects intent.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.