Fisheye Dock
A macOS-style dock — icons swell under the cursor with a fisheye falloff, neighbours rising in sympathy, labels popping above on hover.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/fisheye-dock.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/fisheye-dock.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { icon: ReactNode; label: string; href?: string; onClick?: () => void; active?: boolean }[] | — | Dock items — icon, tooltip label, link or click handler, active dot. |
| size | number | 44 | Resting icon size in px. |
| magnification | number | 76 | Icon size directly under the cursor in px. |
| distance | number | 140 | Cursor influence radius in px — how far the fisheye reaches. |
| className | string | — | Additional CSS classes. |