Reorder List
A drag-to-reorder list where items lift on grab, spring to place, and neighbours flow around them.
- Draft proposal
- Review with design
- Ship to staging
- Announce
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/reorder-list.json"Built on Motion's drag-to-reorder primitives: grabbing an item lifts and scales
it, and the rest of the list springs around it in real time. Works with pointer
and touch, and the grab lift is skipped under prefers-reduced-motion.
Usage
tsx
import { ReorderList, ReorderItem } from "@/components/godui/reorder-list";Hold values in state and pass the matching setState as onReorder. Each
ReorderItem takes the value it represents — use a stable key.
tsx
<ReorderList values={items} onReorder={setItems}>
{items.map((item) => (
<ReorderItem key={item.id} value={item}>
{item.label}
</ReorderItem>
))}
</ReorderList>Set axis="x" for a horizontal list.
Props
ReorderList
| Prop | Type | Default | Description |
|---|---|---|---|
values | T[] | — | Ordered values rendered as items. |
onReorder | (values: T[]) => void | — | Called with the next order while dragging. |
axis | "x" | "y" | "y" | Drag axis. |
ReorderItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | T | — | The value this item represents within values. |
Both components forward every standard attribute to their underlying <ul> / <li>.