Shadcn Sortable File List

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

• A reorder that must reach a server and roll back when the save fails: use the Sortable Persisted Order example
• A titled music queue with a track count and a now playing mark: use the Sortable Playlist example
• Cards that move between several status columns on one board: 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

• handleValueChange only stores the order and raises a toast per drop; send the new order to your API there
• Each row carries a pointer cursor and an empty onClick stub; open the file from it or drop both
• 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