Docs/Magnetic 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

Usage

API Reference

PropTypeDefault
itemsArray of dock items with id, label, icon, onClick, isActive, and badge. (Required)
DockItem[]—
iconSizeBase size of icons in pixels.
number56
maxScaleMaximum scale factor when hovering directly over an icon.
number1.5
magneticDistancePixel distance for magnetic effect falloff.
number150
showLabelsShow tooltip labels on hover.
booleantrue
positionDock orientation.
"bottom" | "top" | "left" | "right""bottom"
variantBackground style variant.
"glass" | "solid" | "transparent""glass"

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv
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} />