Expandable Dock
A macOS-inspired dock with magnification effect and glassmorphism.
Preview
Interactive Preview
Installation
Usage
tsx
import { ExpandableDock } from "@/components/ui/expandable-dock"
const items = [
{ title: "Home", icon: "solar:home-2-bold-duotone", href: "#" },
{ title: "Products", icon: "solar:widget-bold-duotone", href: "#" },
{ title: "Analytics", icon: "solar:chart-2-bold-duotone", href: "#" },
{ title: "Settings", icon: "solar:settings-bold-duotone", href: "#" }
]
export default function Demo() {
return <ExpandableDock items={items} />
}Dependencies
framer-motion@iconify/react
Props
| Prop | Type | Default |
|---|---|---|
| items | array | - |