Components
Loading preview...
This DockMorph component is a modern, customizable navigation bar inspired by macOS but redesigned with a futuristic, morphic-glass aesthetic. It stays fixed to the screen — at the bottom, top, or left — even while scrolling, ensuring constant accessibility. Each icon is interactive, with smooth scaling and a morphic glass bubble that expands behind the hovered item, creating an organic, fluid effect. Tooltips provide quick context, and the design automatically adapts to both dark and light themes using Tailwind’s utility classes. Its versatility makes it suitable for dashboards, productivity apps, or creative websites where you want a unique, always-visible navigation experience that feels sleek, interactive, and visually engaging.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/dock-morph"use client"
import DockMorph from "@/components/ui/dock-morph"
import { Home, Search, Bell, User, Settings } from "lucide-react"
export default function DemoOne() {
const items = [
{ 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") },
]
//<DockMorph position="bottom" />
// <DockMorph position="top" />
// <DockMorph position="left" />
return <DockMorph />
}