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

PropTypeDefaultDescription
itemsDockItem[]{ id, label, icon, active?, onSelect? } per icon.
orientation"horizontal" | "vertical""horizontal"Dock axis — pointer tracking, tooltips, and arrows follow.
magnifynumber1.6Peak scale under the pointer or keyboard focus.
reorderable / onReorderboolean / (order: string[]) => voidPointer drag plus Space-lift keyboard reordering, announced live.