Data

KanbanBoard.

Drag tasks across columns or use keyboard-accessible move buttons.

Real interactive component

Live demo

To do1

Build components

Finish UI primitives

Team

In progress1

Review motion

Test theme transitions

Done1

Set up workspace

The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.

Props & API reference

Parameters available in the shared component, including value types, requirements and accepted options.

5 props

Parameter	Type	Required	Default	Possible values	Description
`columns`	`KanbanColumn[]`	Yes	—	—	Column IDs and titles.
`cards`	`KanbanCard[]`	Yes	—	—	Task IDs, titles, descriptions, column assignments and assignees.
`onMove`	`(cardId: string, columnId: string) => void`	No	—	—	Called on drag-and-drop or move-button use.
`renderCard`	`(card: KanbanCard) => ReactNode`	No	—	—	Custom content for each task card.
`className`	`string`	No	—	—	Additional CSS class on the outer component element.