DocsMagnetic Dock

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.

Installation

pnpm dlx shadcn@latest add @componentry/magnetic-dock

Dependencies: framer-motion

Usage

API Reference

PropTypeDefault
itemsDockItem[]

Array of dock items with id, label, icon, onClick, isActive, and badge. (Required)

—
iconSizenumber

Base size of icons in pixels.

56
maxScalenumber

Maximum scale factor when hovering directly over an icon.

1.5
magneticDistancenumber

Pixel distance for magnetic effect falloff.

150
showLabelsboolean

Show tooltip labels on hover.

true
position"bottom" | "top" | "left" | "right"

Dock orientation.

"bottom"
variant"glass" | "solid" | "transparent"

Background style variant.

"glass"

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousMac KeyboardNextMusic Player
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} />