Componentry

Magnetic Dock

A macOS-style magnetic dock with smooth scaling animations powered by spring physics. Features cursor-following magnification, tooltips, notification badges, and active state indicators.

Install
pnpm dlx shadcn@latest add "https://componentry.fun/r/magnetic-dock.json"
Examples

Default (Glass)

import {
  MagneticDock,
  DockIconHome,
  DockIconSearch,
  DockIconFolder,
  DockIconMail,
  DockIconMusic,
  DockIconSettings,
  DockIconTrash,
} from "@/components/ui/magnetic-dock"

const items = [
  { id: "home", label: "Home", icon: <DockIconHome />, isActive: true },
  { id: "search", label: "Search", icon: <DockIconSearch /> },
  { id: "folder", label: "Finder", icon: <DockIconFolder /> },
  { id: "mail", label: "Mail", icon: <DockIconMail />, badge: 3 },
  { id: "music", label: "Music", icon: <DockIconMusic /> },
  { id: "settings", label: "Settings", icon: <DockIconSettings /> },
  { id: "trash", label: "Trash", icon: <DockIconTrash /> },
]

<MagneticDock items={items} />

Solid Variant

<MagneticDock items={items} variant="solid" />

Large Scale Effect

<MagneticDock
  items={items}
  iconSize={48}
  maxScale={2}
  magneticDistance={200}
/>
Features
Magnetic Scaling
Icons smoothly scale based on cursor proximity using spring physics
Spring Physics
Framer Motion springs create natural, fluid animations with proper physics
Floating Effect
Icons rise up when magnified, creating a 3D lifting effect
Tooltips
Animated tooltips appear on hover with smooth enter/exit transitions
Badge Support
Notification badges with animated appearance and 99+ overflow handling
Active States
Visual indicator dot for currently active items
Glass Morphism
Frosted glass effect with backdrop blur and subtle reflections
Props
items
Array of dock items with id, label, icon, onClick, isActive, and badge (required)
iconSize
Base size of icons in pixels (default: 56)
maxScale
Maximum scale factor when hovering directly over an icon (default: 1.5)
magneticDistance
Pixel distance for magnetic effect falloff (default: 150)
showLabels
Show tooltip labels on hover (default: true)
position
Dock orientation: "bottom", "top", "left", or "right" (default: "bottom")
variant
Background style: "glass", "solid", or "transparent" (default: "glass")
Item Properties
id
Unique identifier for the item (required)
label
Display label shown in tooltip (required)
icon
React node for the icon (required)
onClick
Click handler function
isActive
Whether the item is currently active (shows indicator dot)
badge
Notification badge count (displays 99+ for values over 99)
Included Icons
DockIconHome
Home/house icon
DockIconSearch
Magnifying glass search icon
DockIconFolder
Folder/finder icon
DockIconMail
Envelope mail icon
DockIconMusic
Music note icon
DockIconSettings
Gear/cog settings icon
DockIconTrash
Trash/delete icon