Dock
macOS-style dock with cursor magnification.
- 1.4 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://paulkeys.org/r/dock.jsonAdds components/velora/dock.tsx, installs motion.
Props
Dock
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
className | string | — |
baseSizeIcon size at rest, px | number | 40 |
magnificationIcon size under the cursor, px | number | 64 |
distanceCursor influence radius, px | number | 140 |
DockIcon
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
className | string | — |
labelAccessible name; also used as the tooltip title | string | — |
hrefRender as a link to this URL instead of a button | string | — |
onClickClick handler for the button (or link) | React.MouseEventHandler<HTMLElement> | — |
Accessibility
- Reduced motion
- Icons stay at their base size and never magnify; only the hover color change remains.
- Keyboard
- Each DockIcon is a native button, or a link when href is set, reachable with Tab and activated with Enter (and Space for buttons); focus shows a ring and magnifies the icon and its neighbours.
- Screen readers
- Each icon is announced as a button or link named by its label prop.