Components
macOS Dock
macOS-style magnifying dock: cursor distance drives a raised-cosine size wave across the icons, the hovered tool gets a hairline tooltip, a click bounces the icon off the tray floor, running apps keep a dot underneath, and a Cmd-K slot at the end opens a small command menu above the tray. Icons come in as props (any node - an img, an svg); the built-in set is CSS-drawn, so nothing 404s. Light and dark via shadcn theme tokens; respects reduced motion.
import { useEffect } from "react"
import { Demo } from "@/components/ui/macos-dock"
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="w-full">
<Demo />
</div>
)
}