The Dock component recreates the macOS dock: items swell as the pointer approaches, and each one names itself in a tooltip on hover or focus.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/dock.jsonEverything Dock accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | One <DockItem> per entry |
| size | number | 44 | Resting size of each item, in pixels |
| magnification | number | 76 | Size an item reaches directly under the pointer |
| reach | number | 130 | How far, in pixels, the magnification reaches along the dock |
| className | string | '' | Additional CSS classes for the dock container |
| DockItem: label (required) | string | No default | Name shown in the tooltip and used as the item's accessible name |
| DockItem: children (required) | React.ReactNode | No default | Icon or content for the item |
| DockItem: onClick | () => void | undefined | Called when the item is activated |
| DockItem: href | string | undefined | Render the item as a link instead of a button |
| DockItem: className | string | '' | Additional CSS classes for the item itself |
Required.