A drag-to-reorder list with pointer dragging, siblings that slide out of the way, and full keyboard reordering with live announcements.
npx shadcn@latest add https://hyperblur.dev/r/sortable-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sortable-list.tsx.
import { SortableList } from "@/components/hyperblur/sortable-list"
<SortableList onReorder={(items, from, to) => console.log(from, to)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; title: string; meta?: string; tone?: "blue" | "green" | "amber" | "red" | "neutral" }[] | defaultTasks | Items in their starting order. The list keeps its own order after each reorder. |
| label | string | "Sortable list" | Accessible name of the list. |
| accent | string | "#2f7bff" | Color of the lifted row outline and the grip while dragging. |
| onReorder | (items: SortableItem[], from: number, to: number) => void | Called when an item is dropped in a new position, with the new order and the old and new indexes. |