# Sortable list

> Drag to reorder, or use arrow keys on the handle; announces moves.

Component · Pro · https://lodeui.com/components/sortable-list

## When to use

- Reordering short lists: priorities, navigation items, steps.

## When not to use

- Moving items between columns: use the kanban board block.

## Installation

```bash
npx shadcn@latest add @lode/sortable-list
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| ↑ / ↓ | 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.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.