A macOS-style dock whose icons swell smoothly as the cursor passes over them, with a label tooltip on each.
npx shadcn@latest add https://hyperblur.dev/r/dock.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dock.tsx.
import { Dock } from "@/components/hyperblur/dock"
<Dock items={[{ id: "home", label: "Home", icon: <HomeIcon />, href: "/" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon: ReactNode; onClick?: () => void; href?: string }[] | required | Dock entries. An item with href renders as a link, otherwise as a button. |
| magnification | number | 1.6 | Maximum scale of the icon under the cursor. |
| distance | number | 120 | Distance in pixels along the dock over which the magnification fades out. |
| size | number | 48 | Base icon size in pixels. |
| position | "bottom" | "top" | "bottom" | Edge the dock sits on. Icons grow away from it and tooltips open on the opposite side. |