Dock

macOS-style dock with cursor magnification.

1.4 KB gzipped
Deps: motion/react
Reduced-motion safe
Base UI & Radix compatible

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/dock.json

Adds components/velora/dock.tsx, installs motion.

Props

Dock

Prop	Type	Default
`children*`	`React.ReactNode`	`—`
`className`	`string`	`—`
`baseSize` Icon size at rest, px	`number`	`40`
`magnification` Icon size under the cursor, px	`number`	`64`
`distance` Cursor influence radius, px	`number`	`140`

DockIcon

Prop	Type	Default
`children*`	`React.ReactNode`	`—`
`className`	`string`	`—`
`label` Accessible name; also used as the tooltip title	`string`	`—`
`href` Render as a link to this URL instead of a button	`string`	`—`
`onClick` Click 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.