Special/Dock

Dock

macOS-style icon dock with spring-physics magnification. Nearby icons scale up smoothly as the cursor moves along the dock — powered by real spring animations, not CSS transitions.

import { Dock } from "@animui/ui"

Basic

Hover over the dock and move left/right to see spring magnification in action.

Icon structure

Each icon is a full w-full h-full div inside the icon container. This lets you style app-icon aesthetics independently.

{
  id: "finder",
  label: "Finder",
  icon: (
    <div className="w-full h-full rounded-2xl bg-blue-500 flex items-center justify-center shadow-inner">
      <FolderOpen className="h-1/2 w-1/2 text-white" />
    </div>
  ),
}

DockItem props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier.
`icon`	`ReactNode`	—	Icon element — typically a div with bg + icon inside.
`label`	`string`	—	Tooltip text shown on hover.
`onClick`	`() => void`	—	Click handler.
`className`	`string`	—	Extra classes for the icon container.

Dock props

Prop	Type	Default	Description
`items`	`DockItem[]`	—	Array of items to display in the dock.
`iconSize`	`number`	`52`	Base size of each icon in pixels.
`magnification`	`number`	`1.9`	Scale factor at cursor center (1 = no magnification).
`distance`	`number`	`110`	Pixel radius of the magnification falloff.
`variant`	`"glass" \| "solid" \| "minimal"`	`"glass"`	Visual style of the dock background.
`className`	`string`	—	Additional classes.