Floating Dock

macOS-style dock with magnetic scaling, spring physics, and tooltips.

UniqueUI CLI

npx uniqueui add floating-dock

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/floating-dock.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Usage

import { FloatingDock } from "@/components/ui/floating-dock";

export default function Example() {
  return (
    <div className="flex items-center justify-center p-20 text-white">
      <FloatingDock
        items={[
          { id: "home", icon: <span className="text-xl">🏠</span>, label: "Home" },
          { id: "search", icon: <span className="text-xl">✨</span>, label: "Search" },
          { id: "layers", icon: <span className="text-xl">📚</span>, label: "Layers" },
          { id: "scroll", icon: <span className="text-xl">📜</span>, label: "Scroll" },
          { id: "terminal", icon: <span className="text-xl">💻</span>, label: "Terminal" },
        ]}
      />
    </div>
  );
}

Props

Prop	Type	Description
`items`	`{ id: string; icon: React.ReactNode; label: string; onClick?: () => void; href?: string }[]`	Dock entries. Each item has an id, an icon, a tooltip label, and an optional onClick handler or href (rendered as a link when set).
`className`	`string`	Tailwind classes merged onto the dock container.
`iconSize`	`number`	Base size in pixels of each dock icon at rest.
`maxScale`	`number`	Maximum scale multiplier applied to the icon nearest the cursor.
`magneticRange`	`number`	Distance in pixels over which the cursor magnifies nearby icons.
`theme`	`"light" \| "dark"`	Color theme for the dock surface and tooltips.