Dock
.mdA macOS-style dock whose icons swell on springs as the cursor nears; labels rise above and the active dot glides between apps.
docknavigationtoolbarmagnifymacosspringsmotion values
Installation
$npx shadcn@latest add @geturui/dock
Usage
usage.tsx
1import { Dock } from "@/components/ui/dock";
2import { House, Mail, Settings2 } from "lucide-react";
3
4export function AppDock() {
5 return (
6 <Dock
7 aria-label="Applications"
8 items={[
9 { id: "home", label: "Home", icon: <House />, group: "apps" },
10 { id: "mail", label: "Mail", icon: <Mail />, group: "apps", badge: 3 },
11 { id: "settings", label: "Settings", icon: <Settings2 />, group: "system" },
12 ]}
13 />
14 );
15}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | { id: string; label: string; icon: ReactNode; group?: string; badge?: number | boolean; href?: string; onClick?: () => void }[] | — | Dock entries. A separator is drawn wherever `group` changes. Items with href render as links. |
activeId | string | — | Controlled id of the item with the active dot. |
defaultActiveId | string | items[0].id | Initial active item when uncontrolled. |
onActiveChange | (id: string) => void | — | Called when an item is activated. |
size | number | 44 | Resting icon size in px. |
magnification | number | 68 | Size of the icon under the cursor in px. |
distance | number | 140 | How far either side of the cursor the magnification reaches, in px. |
aria-label | string | "Dock" | Accessible name of the toolbar. |
className | string | — | Classes for the dock container. |
Accessibility
- The dock is a role="toolbar" with a roving tabindex: Tab enters once, ← → Home End move between items.
- Keyboard focus magnifies the focused icon and shows its label, just like hovering.
- Each item is a real button or link labelled with its name (and badge count); the active one has aria-current.
- Magnification only follows a mouse pointer, so touch taps don't leave icons swollen. Reduced motion turns it off.