Browse components
Dock
macOS-style toolbar where icons magnify as the cursor passes.
Installation
npx shadcn@latest add @glint-ui/dockFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dock.json
Usage
import { Dock } from "@/components/ui/dock";
<Dock items={[{ label: "Home", icon: <HomeIcon /> }, { label: "Search", icon: <SearchIcon /> }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, icon, onClick }. |
| baseSize | number | 48 | Resting icon size in px. |
| magnification | number | 80 | Icon size under the cursor, in px. |
| distance | number | 140 | Px where magnification fades out. |
| className | string | — | Extra classes for the root element. |