MacOS Dock

dock x magnify

macOS-style dock with magnification on hover. From Cult UI.

dockmacosmagnifycultui

Code

dock-macos.tsx

"use client";
import { useState } from "react";

export function MacOSDock({ icons }: { icons: string[] }) {
  const [hovered, setHovered] = useState<number | null>(null);
  return (
    <div className="flex items-end gap-1 rounded-2xl border border-border bg-surface/80 px-3 py-2 backdrop-blur-xl">
      {icons.map((icon, i) => (
        <button key={i} onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
          className="flex size-10 items-center justify-center rounded-xl text-xl transition-all duration-200"
          style={{ transform: hovered === i ? "scale(1.5) translateY(-8px)" : hovered !== null ? "scale(0.9)" : "" }}>
          {icon}
        </button>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the MacOS Dock component and wire it to my accent.”