DockPro

• A launcher of 4–10 top-level destinations or tools, like an app switcher.
• Playful navigation on marketing pages and portfolios.

• Primary navigation of a dense app: use a sidebar or tabs.
• Touch-first screens: magnification needs a mouse (the dock still works, just without the effect).

Import it from @/components/ui/dock after installing.

import { Home, Mail, Settings } from "lucide-react";
import { Dock } from "@/components/ui/dock";

export function AppDock() {
  return (
    <Dock
      aria-label="Apps"
      items={[
        { id: "home", label: "Home", icon: <Home />, href: "/", active: true },
        { id: "mail", label: "Mail", icon: <Mail />, href: "/mail", badge: 3 },
        { type: "separator", id: "sep" },
        { id: "settings", label: "Settings", icon: <Settings />, onSelect: () => openSettings() },
      ]}
    />
  );
}

• A nav landmark of real links or buttons, each named by its label (and badge count).
• Active links set aria-current="page"; active buttons set aria-pressed.
• Labels show as tooltips on hover and on keyboard focus.

• Each tile springs between its size and the magnified size based on pointer distance (stiffness 170, damping 12).
• Tooltips fade up in 150ms.
• No magnification under reduced motion.

• Shrinks its icons (down to 28px) so every item fits narrow containers like a 375px phone.
• Touch input skips magnification, so taps land where expected.

• Pointer position is a motion value; tiles update without React re-renders.

• Give every item a label; it is the accessible name and the tooltip.
• Use href for navigation and onSelect for actions, not both.