ns-ui
Drag-to-reorder where the dragged row pushes a continuous falloff field through its neighbors — they shoulder sideways and the gap ahead widens before the card ever arrives, instead of a hard placeholder line.
Use when a vertical list whose order the user changes by dragging, where neighbours should shoulder aside through a continuous falloff field and the gap open before the card arrives rather than a hard placeholder line snapping into place; pick swipe-row-detent instead when the gesture is lateral and reveals actions rather than moving the row, or dock-shelf-lean when the row is a dock and hover emphasis matters more than reordering.
Install
npx shadcn add https://design.helpmarq.comns-ui / reorder-drag-wake
Drag the grip to reorder. Neighbors shoulder aside as you pass.
Draft launch brief
due tomorrow
Review pricing copy
waiting on legal
Ship onboarding fix
in progress
Sync with design
unscheduled
Triage backlog
12 items
Prep release notes
draft
drag a row, or grip + space + arrows
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BowWakeItem[] | — | — |
| onReorder? | (items: BowWakeItem[]) => void | — | fires whenever the committed order changes — drag drop or a keyboard step |
| className? | string | — | — |
| aria-label? | string | — | — |