Dock

macOS-style dock with cursor magnification

Icons magnify as the cursor approaches, with spring physics on size and lift. Tooltips animate in on hover and a dot marks the active item.

Preview

Home

Overview selected

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/dock.json

Usage

Import the component:

import { Dock } from "@/components/rohan/dock"
import { Camera, Folder, Home, Mail, Music, Terminal } from "lucide-react"

Use it in your code:

const items = [
  { id: "home", label: "Home", icon: <Home /> },
  { id: "files", label: "Files", icon: <Folder /> },
  { id: "terminal", label: "Terminal", icon: <Terminal /> },
  { id: "music", label: "Music", icon: <Music /> },
  { id: "photos", label: "Photos", icon: <Camera /> },
  { id: "mail", label: "Mail", icon: <Mail /> },
];

<Dock items={items} />

Props

Property	Type	Default	Description
items	DockItem[]	—	Array of items with { id, label, icon, onClick? }.
baseSize	number	42	Icon size at rest, in px.
maxSize	number	72	Icon size directly under the cursor, in px.
className	string	—	Optional CSS classes for the dock container.

Components