Floating Dock

A macOS-style dock with smooth hover animations, spring physics, and responsive mobile/desktop variants. Perfect for app navigation.

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/floating-dock.json

Usage

tsx
13 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
import { FloatingDock } from "@/components/ui/floating-dock"
import { Home, Settings, User, FileText } from "lucide-react"

const items = [
  { title: "Home",      icon: <Home />,     href: "/" },
  { title: "Profile",   icon: <User />,     href: "/profile" },
  { title: "Documents", icon: <FileText />, href: "/docs" },
  { title: "Settings",  icon: <Settings />, href: "/settings" },
]

export default function App() {
  return <FloatingDock items={items} />
}

Examples

Custom positioning

Props

PropTypeDefaultDescription
items{ title: string; icon: ReactNode; href: string }[]-Array of dock items — each with a label, icon, and link.
desktopClassNamestringundefinedAdditional class names applied to the desktop (horizontal) dock.
mobileClassNamestringundefinedAdditional class names applied to the mobile (expandable) dock.