Shadcn Sortable Grid Layout

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 single column of rows in place of tiles spread across the width: use the Sortable File List 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

• getItemSize sets col-span-2 on the card inside SortableItem rather than on the grid cell, so the featured card fills 1 cell like the rest
• Replace defaultGridItems; its priority field is never rendered
• 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