A board of columns with cards you drag within a column or across columns, and columns you drag to reorder. Controlled, keyboard friendly, and columns can collapse.
value maps each column id to its items, in column order. Keep column ids as words, since keys that look like numbers always sort first in a JavaScript object.
A card moving into another column moves live while you drag, so the column makes room. onValueChange fires as it crosses.
A move inside one column, and a column move, land on drop.
Escape, or a drop outside the board, puts everything back.
onDragStart and onDragEnd tell you what moved. onDragEnd gets from, to, the new index and the final value, so you can save the change, such as a new status for a task.
Columns only drag by a KanbanColumnHandle, so a board with no handles has fixed columns. Pass asChild to make a whole header the handle. disabled locks a column in place, so other columns cannot take its spot, but cards can still land in it.
collapsed narrows a column to a strip, and the width tweens with the card resize motion. Leave KanbanColumnContent out of a collapsed column and show a label instead.
Focus a card, press Space to pick it up, use the arrow keys to move it, and press Space again to drop. Enter is left free, so a card can open on Enter. On phones, press and hold a card to pick it up.