Dock
macOS-style dock with magnifying icons and labels.
A dock is an app-style launcher whose icons swell as the pointer approaches and neighbours make room, like the macOS Dock. Labels appear on hover and focus, active items get a dot, and keyboard focus lifts items too.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/dock.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/dock.
Builds on: motion
Usage
import { Dock, DockItem } from "@/components/ui/dock";
<Dock>
<DockItem label="Home"><HomeIcon /></DockItem>
</Dock>Motion
Items scale by distance to the pointer with a cosine falloff, eased by GSAP. Keyboard focus lifts an item too.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Dock
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 40 | Resting item size (px). |
| magnification | number | 1.6 | Peak size multiplier. |
| distance | number | 120 | Falloff radius (px). |
DockItem
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Tooltip and accessible name. |
| active | boolean | — | Shows the active dot. |
| asChild | boolean | — | Render a link. |
Accessibility
- A <nav> of buttons, each with an accessible name.
- With motion off it is a plain toolbar.
FAQ
Also searched as: macos dock react · dock component · magnification dock · animated dock · app launcher bar