← All components
Interaction / component
Dock
A compact toolbar that magnifies nearby actions with a responsive spring.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Demo.tsx contains the complete interactive example.
- Reduced motion renders a static state. Paused, hidden and offscreen instances stop requesting animation frames.
- Arrow keys, Home and End move focus; Enter and Space activate native buttons. dockHeight reserves space so magnification does not move adjacent content. Large item collections scroll horizontally.
React 19Pointer Events
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
baseItemSize | number | 50 | Item size |
magnification | number | 70 | Magnification |
distance | number | 200 | Influence distance |
panelHeight | number | 68 | Panel height |
dockHeight | number | 256 | Reserved height |
items | DockItem[] | Home, Library, Saved, Settings | Each item has icon: ReactNode, label: string, optional onClick and className. |
spring | { mass?: number; stiffness?: number; damping?: number } | { mass: 0.1, stiffness: 150, damping: 12 } | Spring physics for item magnification. |
onSelect | (index: number, item: DockItem) => void | undefined | Runs after the selected item callback. |
paused | boolean | false | Freeze decorative motion; controls remain usable. |
replayToken | number | 0 | Change to reset decorative motion. |
className | string | '' | Additional outer classes. |