Default
A vertical list reordered by dragging the grip handle. The dragged row dims in place while a portal overlay follows the pointer; keyboard users can focus the handle and move items with the arrow keys.
Audit color tokensIn progress
Ship elevation ladderDone
Migrate data gridIn progress
Write sortable docsTodo
Dark mode sweepTodo
Horizontal
strategy="horizontal" for rows of chips — each chip is its own drag handle.
JJenny Wilson
DDavid Lee
MMaria Gomez
LLiam Brown
Grid
strategy="grid" reorders in two dimensions inside a CSS grid.
Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6
Tile 7
Tile 8
Nested Groups
Two independent levels: an outer Sortable reorders the group cards by the handle in each header, and an inner Sortable inside every card reorders its own values. Handles keep the levels separate — a child drag never moves its parent.
Colors
White
Black
Grey
Green
Sizes
Small
Medium
Large
Materials
Cotton
Polyester
Wool
Disabled Item
disabled on a SortableItem pins it: it dims, cannot be dragged, and other items cannot displace it.
Connect your repository
Configure the build
Production deploy (locked)
Invite your team