About
A floating dark glass dock with a smooth fisheye magnification effect that grows icons as your cursor moves across them.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mac-Style Floating Dock to your project and fits it to your theme.
Code
How Mac-Style Floating Dock is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos
import MacFloatingDock from "@/components/ui/mac-style-floating-dock";
// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
return (
<div className="relative min-h-screen bg-gradient-to-br from-indigo-900 via-purple-800 to-fuchsia-700">
<MacFloatingDock onSelect={(id) => console.log("Selected:", id)} />
</div>
);
}