Sortable listPro
Drag to reorder, or use arrow keys on the handle; announces moves.
- Ship onboarding checklistP0
- Fix double-charge bugP0
- Dark mode chart contrastP1
- Audit log CSV exportP2
When to use
- Reordering short lists: priorities, navigation items, steps.
When not to use
- Moving items between columns: use the kanban board block.
Installation
Usage
Import it from @/components/ui/sortable-list after installing.
example.tsx
import * as React from "react";
import { SortableList } from "@/components/ui/sortable-list";
export function Priorities() {
const [items, setItems] = React.useState([{ id: "a", name: "Billing" }, { id: "b", name: "Search" }]);
return <SortableList aria-label="Priorities" items={items} onReorder={setItems} getId={(i) => i.id} renderItem={(i) => i.name} />;
}API reference
SortableList
Drag a handle or use the keyboard to reorder.
| Prop | Type | Default | Description |
|---|---|---|---|
| items / onReorder | T[] / (items: T[]) => void | – | Controlled order. |
| getId | (item) => string | – | Stable id. |
| renderItem | (item) => ReactNode | – | Row content. |
Keyboard interactions
| Keys | Action |
|---|---|
| ↑or↓ | Move the focused item (on its handle) |
| Tab | Move between handles |
Accessibility
- Each handle states its position and how to move it.
- Moves are announced in a live region.
Motion
- Items slide into place with layout animation.
Responsive behavior
- Touch drag works on the handle.
Performance
- Fine up to ~100 items.
Notes for AI
- Persist order in onReorder.
This page as Markdown, for assistants and coding agents:
/components/sortable-list/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt