# Shadcn Persisted Order

> Sortable list persisted to a backend

- Type: example, free and open source (MIT)
- Component: [Sortable](https://reui.io/components/sortable.md)
- Page: https://reui.io/components/sortable/c-sortable-8
- Docs (Base UI): https://reui.io/docs/components/base/sortable.md
- Docs (Radix UI): https://reui.io/docs/components/radix/sortable.md
- MCP: `get_example("c-sortable-8")`
- Registry item: https://reui.io/r/styles/base-nova/c-sortable-8.json
- Uses: Badge, Sortable

## Best for

Numbered release tasks whose new order goes to a mock save on each drop, with the old order restored if it fails

## Agent notes

- Replace `persistOrder`, which waits 700 ms and rejects about 1 call in 4, with your API request
- A failed save calls `setItems` with `previousValue`, which also undoes any drag made while that save was pending
- `toast.promise` reports each save and shows nothing unless your app mounts the Sonner toaster

## When not to use

- Saved moves of cards across several status columns: use [Kanban](https://reui.io/components/kanban.md) (`get_component("kanban")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/c-sortable-8
```

## About Shadcn Sortable

### When to use

- Ranked lists such as a play queue, notification channels or release tasks, put in order by a grip
- Tile grids such as a media library, where cards change places across rows and columns
- Grouped options and menus reordered in place, such as product variants or sidebar menu entries

### When not to use

- Cards that move between several status columns on one board: use [Kanban](https://reui.io/components/kanban.md) (`get_component("kanban")`)
- Ranked table rows that keep several columns of values lined up: use the [Drag & Drop blocks](https://reui.io/blocks/data-grid/drag-drop.md)
- A whole page layout of sidebar, top bar and content area around the list: use the [App Shell blocks](https://reui.io/blocks/application/app-shell.md)

### Agent notes

- Drag listeners sit on `SortableItemHandle` only, so a `SortableItem` rendered without one cannot be dragged
- Passing `onMove` skips the built-in reorder, so neither `onValueChange` nor `onValueCommit` fires on drop
- The drag preview clones the child of `Sortable` whose `value` matches the dragged item, so a wrapper around `SortableItem` needs that `value` too

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.