Usage
import { FloatingDock } from "@/registry/components/floating-dock/floating-dock";
<FloatingDock items={[/* … */]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | DockItem[] | ||
size? | number | 40 | Resting icon size, px. |
magnify? | number | 64 | Icon size right under the pointer, px. |
reach? | number | 140 | How far the magnification reaches, px. |
className? | string |
When to use
App-level navigation with a handful of icon destinations, macOS style.
When not to use
More than ~8 destinations, or text-heavy navigation (use nav-sidebar or tabs).