Floating Dock

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

npx uniqueui add floating-dock

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`	`{`	Array defining mapping configuration objects containing icons and references.
`id`	`string`	A unique mapping identifier referencing the component node.
`icon`	`React.ReactNode`	The SVG image rendered actively on the dock interface.
`label`	`string`	String payload rendered inside the expanding tooltip layout.
`onClick`	`() => void`	Routine capturing specific explicit interactions mapped to the dock region.
`href`	`string`	Link routing path if the interface object encapsulates an anchor tag natively.
`className`	`string`	Description coming soon
`iconSize`	`number`	Description coming soon
`maxScale`	`number`	Description coming soon
`magneticRange`	`number`	Description coming soon