Sortable List

ProNew

A vertical list reordered by dragging a handle or from the keyboard, with spring layout motion and screen reader announcements.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/sortable-list

Prop	Type	Default	Description
`items`	`T[]`	-	The items, in their current order.
`onReorder`	`(items: T[]) => void`	-	Called with the new order after a drag or a keyboard move.
`getKey`	`(item: T) => string`	-	A stable, unique key per item.
`getLabel`	`(item: T) => string`	`getKey`	Plain-text name used in handle labels and announcements.
`renderItem`	`(item: T, state: SortableItemState) => ReactNode`	-	Renders a row body. State has `index`, `dragging`, `grabbed`.
`itemClassName`	`string`	-	Class names for each row.
`className`	`string`	-	Class names for the list.

Also accepts ul props such as aria-label and aria-labelledby.

Each row has a drag handle button named "Reorder label" with instructions linked through aria-describedby.
Space or Enter picks a row up (aria-pressed="true"), the arrow keys move it, Home and End jump to the ends, Space or Enter drops it and Escape restores the original order.
Every pick up, move, drop and cancel is announced in a polite live region, for example "Usage-based billing moved to position 1 of 5".
Focus stays on the moving handle while rows reorder around it.
With reduced motion rows jump into place instead of springing.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/sortable-list

Prop	Type	Default	Description
`items`	`T[]`	-	The items, in their current order.
`onReorder`	`(items: T[]) => void`	-	Called with the new order after a drag or a keyboard move.
`getKey`	`(item: T) => string`	-	A stable, unique key per item.
`getLabel`	`(item: T) => string`	`getKey`	Plain-text name used in handle labels and announcements.
`renderItem`	`(item: T, state: SortableItemState) => ReactNode`	-	Renders a row body. State has `index`, `dragging`, `grabbed`.
`itemClassName`	`string`	-	Class names for each row.
`className`	`string`	-	Class names for the list.

Also accepts ul props such as aria-label and aria-labelledby.

Each row has a drag handle button named "Reorder label" with instructions linked through aria-describedby.
Space or Enter picks a row up (aria-pressed="true"), the arrow keys move it, Home and End jump to the ends, Space or Enter drops it and Escape restores the original order.
Every pick up, move, drop and cancel is announced in a polite live region, for example "Usage-based billing moved to position 1 of 5".
Focus stays on the moving handle while rows reorder around it.
With reduced motion rows jump into place instead of springing.