Reorder List

A list reordered by dragging a handle: the other rows make room as the dragged one passes, and buttons do the same from the keyboard.

Examples

Drag a row by its handle, or use the arrows at the end of each row.

Rows can carry any content: here a length on the right, in tabular figures.

A short list with icon tiles, for a settings page.

Sidebar order

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-reorder-list.json

A controlled list: keep the items in state and pass the setter to onReorder.

Prop	Type	Description
items	T[]	The items, in their current order.
onReorder	(items: T[]) => void	Called with the new order after a drag step, a button press or a key.
getKey	(item: T) => string	A stable key for each item.
getLabel	(item: T) => string	The name read in the move buttons and in the announcements.
renderItem	(item: T) => React.ReactNode	The content of a row, between the handle and the move buttons.
aria-label	string	The name of the list.
className	string	Classes for the list.

Three ways to move a row: drag the handle; press the move up or move down button; or focus the row, press Space to pick it up, the arrow keys to move it, Space to drop it and Escape to put it back.
Each move is announced with the new position, for example "Low Tide moved to position 2 of 5". A drag is announced once, when it ends.
The first row's move up button and the last row's move down button stay focusable but do nothing, so focus never jumps away after a move.
Rows settle on a spring with no bounce, and the dragged row lifts slightly. The list holds the row near its ends with a little give. With reduced motion, rows change place at once and the dragged row does not lift.

Inspired by the drag items of UI Layouts, rebuilt on the Reorder components of motion.