Shadcn Sortable Persisted Order

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

• Saved moves of cards across several status columns: use the Kanban component
• Ranked table rows that keep several columns of values lined up: use the Drag & Drop blocks
• A whole page layout of sidebar, top bar and content area around the list: use the App Shell blocks

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
• 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

Third-party API docs

• Sonner v2: API reference, docs