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).
Installation
npx shadcn add @eased-pro/dockNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Usage
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 bylabel(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 labels. 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: labels for ordinary icon buttons.
- Toggle Group: a compact toolbar of toggles.