Reorder List

Sortable list with drag handles and keyboard controls

A controlled or uncontrolled list that reorders from a dedicated drag handle, visible move controls or keyboard shortcuts. Every move is announced with its new position, and the original order can be restored.

Preview

Write the outline
Build the prototype
Test the interaction
Ship the update

Installation

Install the component using the CLI.

npx shadcn@latest add https://rohan.run/r/reorder-list.json

Usage

Import the component:

import { ReorderList } from "@/components/rohan/reorder-list"

Use it in your code:

<ReorderList
  defaultItems={steps.map((step) => ({
    id: step.id,
    label: step.title,
    content: step.title,
  }))}
  label="Project steps"
  allowReset
  onChange={setSteps}
/>

Props

Property	Type	Default	Description
items / defaultItems	ReorderListItem[]	[]	Controlled or initial ordered items with stable ids and content.
onChange	(items: ReorderListItem[]) => void	—	Called with the complete order after every move.
label	string	"Reorderable list"	Accessible name for the ordered list.
allowReset	boolean	false	Shows a reset control when defaultItems are available.
onReset	(items: ReorderListItem[]) => void	—	Called after restoring the original order.
itemClassName	string	—	Classes applied to each sortable row.

Components