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

PropertyTypeDefault
items

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

DockItem[]—
iconSize

Base size of icons in pixels.

number56
maxScale

Maximum scale factor when hovering directly over an icon.

number1.5
magneticDistance

Pixel distance for magnetic effect falloff.

number150
showLabels

Show tooltip labels on hover.

booleantrue
position

Dock orientation.

"bottom" | "top" | "left" | "right""bottom"
variant

Background style variant.

"glass" | "solid" | "transparent""glass"

View source

Click the icon in the preview panel to browse source for each variant.

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
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} />