Components
Loading preview...
This Dock component is a modern, glassmorphic navigation bar inspired by the elegance of macOS but with a unique twist. Instead of sitting flat, the dock is displayed with a slight 3D arc effect using perspective transforms, which makes the layout feel more dynamic and futuristic. Each icon is wrapped with shadcn/ui Buttons and Tooltips for accessibility and consistency, while Framer Motion adds natural hover animations. When you hover over an item, the icon subtly tilts, scales up, and gains a glowing border ring, creating a magnetic feel that draws the eye. Clicking an icon highlights it with a small glowing dot beneath, serving as a minimal but effective active state indicator. The combination of tilt, glow, blur, and arc design makes this component stand out as both functional and visually engaging, perfect for dashboards, apps, or landing pages where you want a unique, premium navigation experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/dockimport Dock from "@/components/ui/dock";
import {
Home,
Search,
Bell,
Settings,
User,
} from "lucide-react"
export default function DemoOne() {
const dockItems = [
{ icon: Home, label: "Home", onClick: () => alert("Home clicked") },
{ icon: Search, label: "Search", onClick: () => alert("Search clicked") },
{ icon: Bell, label: "Notifications", onClick: () => alert("Notifications clicked") },
{ icon: User, label: "Profile", onClick: () => alert("Profile clicked") },
{ icon: Settings, label: "Settings", onClick: () => alert("Settings clicked") },
]
return <Dock items={dockItems} />
}