KQ-561 · REORDER/LIST
Reorder List
A list you rearrange by hand. The row under the pointer lifts to 1.02 with a raised edge on flick and then tracks the pointer 1:1, while the rows it passes slide out of its way on glide and the drop settles it into its slot on snap. The pointer is captured only after 4px of travel, so a plain tap still lands; Space lifts the focused row, Up and Down move it, Home and End send it to the ends, Space drops and Escape puts it back, with every step announced politely.
Press Space to lift the row, Up and Down to move it, Space to drop it, Escape to put it back.
Intake / Triage / Fit check / Quote / Handover
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/reorder-list
Props
- items
- { id: string; label: string; meta?: string }[]
- default —
- Seeds the order; the list owns it after that and reports through onReorder.
- onReorder
- (items: ReorderItem[]) => void
- default —
- Fires with the whole list once a row is dropped, never mid-move.
- renderItem
- (item: ReorderItem) => React.ReactNode
- default —
- Replaces the row's content. Rows keep one shared height either way, so the drop target stays unambiguous.
- label
- string
- default —
- Visible list label; names the list for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; meta?: string }[] | — | Seeds the order; the list owns it after that and reports through onReorder. |
| onReorder | (items: ReorderItem[]) => void | — | Fires with the whole list once a row is dropped, never mid-move. |
| renderItem | (item: ReorderItem) => React.ReactNode | — | Replaces the row's content. Rows keep one shared height either way, so the drop target stays unambiguous. |
| label | string | — | Visible list label; names the list for assistive technology. |