KQ-018 · MAGNET/DOCK
Magnet Dock
Icons that feel the cursor coming — a cosine distance field magnifies the dock, and drag-reorder parts neighbors magnetically before snapping into a slot.
KQ-018 · MAGNET/DOCK
Foreground · Terminal
Drag to reorder · Space lifts with keyboard
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/magnet-dock
Props
- items
- DockItem[]
- default —
- { id, label, icon, active?, onSelect? } per icon.
- orientation
- "horizontal" | "vertical"
- default "horizontal"
- Dock axis — pointer tracking, tooltips, and arrows follow.
- magnify
- number
- default 1.6
- Peak scale under the pointer or keyboard focus.
- reorderable / onReorder
- boolean / (order: string[]) => void
- default —
- Pointer drag plus Space-lift keyboard reordering, announced live.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DockItem[] | — | { id, label, icon, active?, onSelect? } per icon. |
| orientation | "horizontal" | "vertical" | "horizontal" | Dock axis — pointer tracking, tooltips, and arrows follow. |
| magnify | number | 1.6 | Peak scale under the pointer or keyboard focus. |
| reorderable / onReorder | boolean / (order: string[]) => void | — | Pointer drag plus Space-lift keyboard reordering, announced live. |