Kanban board & sortable lists
card-ui grid-ui list-ui tag-ui avatar-ui
The drag-to-reorder + drag-between-columns surface. Two patterns share the same primitives: a single sortable list (priority queue, playlist) and a multi-column kanban (status swimlanes, sprint board, pipeline). Both compose card-uis in containers with HTML5 drag-and-drop wiring.
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.
Audit kanban accessibility
P1
Drag handle hit-target
P2
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.