build69
Sign inGet API key
build69  /  Components  /  Motion — Transitions & Decorative  /  Dock

Dock

v1.0.1Updated 21 Jul 2026

macOS-style magnifying dock (MagicUI). Icons rest at a base size and grow as the cursor approaches, with falloff over distance. Composes a Dock container with DockIcon children that can show a hover tooltip and a "runnin

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendeddockmagnifymacosnavigation+4

The default, out-of-the-box Dock.

Recommended for+14
  • ✓App launchers / desktop-style docks
  • ✓Playful navigation bars
  • ✓Quick-action toolbars on marketing pages
Tags+6
dockmagnifymacosnavigationlaunchermotionmagicuidefault
Features+4
  • Cursor-proximity magnification with distance falloff
  • Horizontal (row) or vertical (column) orientation
  • direction alignment (top / middle / bottom) of growing icons
  • Configurable iconSize / iconMagnification / iconDistance
  • DockIcon tooltip label on hover (macOS-style)
  • DockIcon active "running" dot
  • Respects prefers-reduced-motion (no magnification)
Not recommended for−2
  • ✕Dense data toolbars (use a plain toolbar)
  • ✕Accessibility-critical primary nav (use Sidebar / Topbar)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Dock" })

Usage

import { Dock, DockIcon } from '@/components/motion/dock';

<Dock iconMagnification={64} iconDistance={150}>
  <DockIcon label="Mail" active><Mail /></DockIcon>
  <DockIcon label="Calendar"><Calendar /></DockIcon>
</Dock>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
iconSize

Resting icon size in px (default 40)

number—
iconMagnification

Max magnified size in px (default 60)

number—
iconDistance

Falloff distance from cursor in px (default 140)

number—
direction

Alignment of growing icons (default middle)

'top' | 'middle' | 'bottom'—
orientation

Row or column layout (default horizontal)

'horizontal' | 'vertical'—
label

DockIcon: hover tooltip / aria-label

ReactNode—
active

DockIcon: show a running dot

boolean—

Related

Platform docsAll componentsSource files