Wensity

macOS Floating Dock

Pro

A magnetic dock where icons inflate near the cursor and push their siblings aside.

elite micro interactionsmacosfloatingdockframer motion
macOS Floating Dock component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add macos-floating-dock

Usage

Import MacosFloatingDock from @/components/wensity/macos-floating-dock and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { MacOSFloatingDock } from "@/components/wensity/macos-floating-dock";


const MAC_DOCK_ASSET_BASE =
  "https://assets.wensity.com/components/macOS%20Floating%20Dock/";


function macDockIcon(file: string) {
  return (
    <img
      src={`${MAC_DOCK_ASSET_BASE}${file}`}
      alt=""
      draggable={false}
      className="h-full w-full rounded-[22%] object-cover"
    />
  );
}


export default function Example() {
  return (
    <MacOSFloatingDock
      items={[
        { id: "finder", label: "Finder", icon: macDockIcon("Finder.webp"), indicator: true },
        { id: "safari", label: "Safari", icon: macDockIcon("Safari.webp"), indicator: true },
        { id: "chrome", label: "Chrome", icon: macDockIcon("Chrome.webp") },
        { id: "imessage", label: "Messages", icon: macDockIcon("iMessage.webp") },
        { id: "calendar", label: "Calendar", icon: macDockIcon("Calendar.webp") },
        { id: "bin", label: "Bin", icon: macDockIcon("Bin.webp") },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
itemsMacDockItem[]-Dock icons with id, label, icon node, and optional indicator.
baseSizenumber44Resting icon size in pixels.
maxSizenumber72Maximum size when the cursor is directly over an icon.
influencenumber130Influence radius in pixels. Beyond this, icons return to baseSize.
padnumber10Padding around the dock in pixels.
gapnumber8Gap between icons in pixels.