Sortable List

Drag to reorder a list in React with Motion Reorder, plus Arrow key reordering from the handle and polite announcements of every move for screen readers.

src/registry/ui/sortable-list.tsx/r/sortable-list.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/sortable-list.json

Usage#

tsx
import { SortableList } from "@/components/ui/sortable-list"

export function Example() {
  return <SortableList />
}

API reference#

SortableList props
PropTypeDefault
itemsItem[]DEMO
onReorder(items: Item[]) => void-
classNamestring-

Dependencies#

npm

lucide-reactmotion

Built from

No other MiniDev files
All kanban, timeline and workflow components