Dock

macOS-style dock: icons magnify with pointer distance, labels spring up as tooltips, with active dots, badges and a click bounce.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/dock

import { Dock } from "@/components/dock"

import { DockItem, DockSeparator } from "@/components/dock"
import { Folder, Home, Mail, Settings } from "lucide-react"

export function Demo() {
  return (
    <Dock
    
    >
      <DockItem label="Home" href="/" active><Home /></DockItem>
      <DockItem label="Projects" href="/projects"><Folder /></DockItem>
      <DockItem label="Mail" href="/mail" badge={3}><Mail /></DockItem>
      <DockSeparator />
      <DockItem label="Settings" href="/settings"><Settings /></DockItem>
    </Dock>
  )
}

Updates live as you change the controls. Only non-default props are included.