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>
)
}