Floating Dock

macOS-style floating dock with smooth animations.

Preview

Installation & Usage

tsx
import { FloatingDock } from "@/components/ui/floating-dock"
import { Home, Terminal, Settings, User } from "lucide-react"

export function FloatingDockDemo() {
  const items = [
    { icon: <Home className="h-6 w-6" />, label: "Home" },
    { icon: <Terminal className="h-6 w-6" />, label: "Terminal" },
    { icon: <Settings className="h-6 w-6" />, label: "Settings" },
    { icon: <User className="h-6 w-6" />, label: "User" },
  ]
  
  return (
    <div className="flex justify-center p-10 items-end h-40">
      <FloatingDock items={items} />
    </div>
  )
}