Dock

macOS dock magnification. The scale falloff uses a cosine curve rather than a linear ramp, which is what makes neighbouring icons swell smoothly instead of stepping.

Mobile

dockmacosmagnificationnavigation

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

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

export function Example() {
  return <Dock />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge lucide-react

More in Mobile

iOS Toggle

The iOS switch at its real dimensions — 51×31 with a 27px thumb — using Apple's system green and the spring-like easing curve from the platform.

Segmented Control

The iOS segmented control as a CSS grid, so the thumb width is derived from the number of options and the translate is a whole multiple of it.