We are live on DevHunt: tool of the week contest

check it out

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

PropTypeDefault
itemsarray-