## When to use

When the order or column-membership of items is itself the state. A sorted list communicates priority; a kanban communicates which stage of a workflow each card is in. Reach for these when status is visible on the surface, not buried in a column of a table.

## Sortable list — drag handle to reorder

Single-column list where the row order is the data. Each row carries a leading drag handle (`dots-six-vertical`), the body content, and trailing meta. Hover reveals the handle; drag picks up the row with a shadow + ghost.

Sprint priority Drag to reorder · 4 items
Ship the new auth flow Owner: Jordan · Due Friday P0 Migrate dashboard tokens Owner: Avery · Due next week P1 Add Storybook coverage for primitives Owner: Sam · No due date P2 Investigate slow startup Owner: Riley · Backlog P2

## Kanban board — columns by status

Multi-column grid where each column is a status (To do · In progress · In review · Done). Cards drag horizontally between columns + vertically within. Column header shows count + collapse; per-card chrome shows the assignee avatar + tags.

To do 3
Audit kanban accessibility P1
Drag handle hit-target P2
Empty-column copy P2
In progress 2
Auth flow rebuild P0
OKLCH ramp lint rule P1
In review 1
v0.0.27 release notes P1
Done 8
Safari @scope sweep Done
Toast top-layer channel Done

## Composition rules

- Drag handle is keyboard-accessible — focus the handle, then arrow-up/down to move within a column, arrow-left/right to move between columns. Without keyboard reorder, the surface is not usable.
- Column count is bounded — kanban breaks down past ~6 columns; horizontal scroll is a smell, not a fix. Collapse or paginate columns past the limit.
- WIP limits live in the column header — if a stage has a max ("In progress · 5 of 8"), surface the threshold; over-limit columns get a warning tint on the count.
- Done columns scroll, not grow — completed work piles up. Cap the visible Done column with "Show 14 more"; full archive lives elsewhere.
- Empty columns need copy, not a void — "Drop cards here" or the column's purpose ("Items waiting on a reviewer") makes a fresh board legible. Empty grids look broken.
- Persist optimistically, reconcile on conflict — drag should land instantly; on server reject (concurrent move), animate back with a toast. No spinner during the drag.

## See also

- grid-ui · card-ui — layout primitives.
- list-ui · list-item-ui — sortable-list anatomy.
- filter-bar — frequent companion (filter the cards before reordering).
- bulk-action-toolbar — sibling for status-change without drag (multi-select then update).