Drag to reorder a list, a row of chips or a grid, or move items between the columns of a board, by pointer, touch or keyboard.
npx shadcn@latest add @sphere-kit/sortableimport { Sortable, SortableGroup, SortableItem, SortableHandle, SortableEmpty, SortableProps, SortableGroupProps, SortableItemProps, SortableHandleProps, SortableEmptyProps, SortableMove, SortableOrientation,} from "@/components/ui/sortable"Exports Sortable SortableGroup SortableItem SortableHandle SortableEmpty SortableProps SortableGroupProps SortableItemProps SortableHandleProps SortableEmptyProps SortableMove SortableOrientation. Every part takes its element's usual props and a className.
Drag a step by its handle, or focus the handle and press Space.
Variants run in this order when traffic splits. Drag a chip, or focus it and use ← and →.
The first three show in the ad set. Arrows move a focused image, ↑ and ↓ a row at a time.
Focus a card, Space to pick it up, ← → to change column, Esc to put it back.
Checkout is managed by billing, so it can't be picked up. The other steps still move around it.
With one step there is nothing to reorder yet. The handle still picks it up, and Esc puts it back.