Components
Loading preview...
This Dock component is a modern, interactive navigation bar inspired by the macOS-style dock, built with React, Framer Motion, and shadcn/ui. It displays a row of circular icon buttons, each wrapped in a tooltip for clear labeling. The highlight of the component is the gooey liquid background effect: when a user hovers over an icon, a softly animated blob expands behind it, creating a smooth, fluid-like motion. Framer Motion handles the scaling and spring-based animations, making the hover transitions feel natural and responsive. To maintain clarity, only the background blobs are passed through an SVG goo filter, while the icons themselves remain crisp and sharp. This ensures a visually playful yet professional design that can be used for app shortcuts, quick actions, or feature navigation in dashboards. Overall, the component balances aesthetic depth with practical usability, giving users both an engaging interaction and a clear navigation experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/gooey-dockimport GooeyDock from "@/components/ui/gooey-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 <GooeyDock items={dockItems} />
}