Dock
A macOS-style dock whose items magnify with spring physics as the pointer moves across them.
FinderFileEditView
9:41
Overview
Dashboard
Projects
Team
Reports
MRR
$48.2k
Users
12,840
Churn
1.2%
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/dock.json"Dock tracks the pointer and magnifies each DockItem based on its distance from the
cursor, using a spring (mass 0.1, stiffness 170, damping 12) so neighbors ripple
smoothly. Labels appear above the hovered item.
Usage
tsx
import { Dock, DockItem } from "@/components/godui/dock";tsx
<Dock>
<DockItem label="Home">
<HomeIcon />
</DockItem>
<DockItem label="Search">
<SearchIcon />
</DockItem>
</Dock>Tuning the magnification
tsx
<Dock baseSize={44} magnification={96} distance={180} />Props
Dock
| Prop | Type | Default | Description |
|---|---|---|---|
baseSize | number | 44 | Resting size of each item in pixels. |
magnification | number | 72 | Maximum magnified size in pixels at the pointer. |
distance | number | 140 | Pointer distance over which items are affected. |
DockItem
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Label shown above the item on hover. |
Both components forward every standard <div> attribute to their root element.
DockItem must be rendered inside a Dock.
Context Menu
A right-click menu that springs open from the exact cursor point and flips to stay inside the viewport, with icons, shortcuts, and destructive actions.
Dropdown Menu
An accessible dropdown that springs open from its trigger edge, with submenus, icons, shortcuts, separators, and full keyboard navigation.