A row of items that swell under the pointer and settle back, with a label over the one you point at and a hop when clicked.
Point at the dock
pnpm dlx shadcn@latest add @latheui/magnify-dockPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Magnify Dock is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native nav attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| items* (required) | { id: string; label: string; icon: ReactNode; href?: string; onClick?: () => void; active?: boolean }[] | — | The items. With href an item is a link; active adds a small dot beneath it. |
| label* (required) | string | — | Accessible name for the dock. |
| size | number | 48 | Size of an item at rest, in px. |
| magnified | number | 80 | Size of the item under the pointer, in px. |
| range | number | 140 | How far from the pointer items still grow, in px. |
| gap | number | 10 | Space between items, in px. |
| radius | number | string | 14 | Item corners. |
| bounce | boolean | true | A small hop when an item is clicked. |
| stiffness | number | 380 | Spring stiffness for the swell. Higher is quicker. |
| damping | number | 28 | Spring damping for the swell. Lower is bouncier. |
| shelf | "bordered" | "plain" | "none" | "morph" | "bordered" | The surface behind the items: a panel with or without an outline, nothing, or an outlined shelf that rounds up around each item as it grows. |
<MagnifyDock label="Tools" items={items} size={40} magnified={56} range={100} bounce={false} />