Data Display

KanbanBoard

Controlled multi-column board for reordering cards within and across workflow columns with keyboard, pointer, and live-region feedback.

import { KanbanBoard } from '@lostgradient/cinder/kanban-board';
boardkanbandragreorder
01

Overview

Controlled multi-column board for reordering cards within and across workflow columns with keyboard, pointer, and live-region feedback.

Usage

svelte 
<script lang="ts">
  import { KanbanBoard } from '@lostgradient/cinder/kanban-board';
</script>

Guidance

Use When

  • Presenting a workflow board where users move cards between ordered columns.
  • Consumers own card rendering and need cinder to manage reorder affordances and change metadata.

Avoid When

  • Showing a single ordered list — use sortable-list instead.
  • Sorting by computed fields rather than direct manual placement.
Live preview
02

When to use

Use when
  • Presenting a workflow board where users move cards between ordered columns.
  • Consumers own card rendering and need cinder to manage reorder affordances and change metadata.
Avoid when
  • Showing a single ordered list — use sortable-list instead.
  • Sorting by computed fields rather than direct manual placement.
03

Examples

Project board

Move work items between columns, reorder columns, and collapse quiet lanes.

04

Props

Props for kanban-board
Name Type Default Required Bindable Description
columns KanbanBoardColumn<Card>[] req
getCardKey (card: Card) => stringnumber req
getCardLabel (card: Card, column: KanbanBoardColumn<Card>, index: number) => string req
onchange (nextColumns: KanbanBoardColumn<Card>[], change: KanbanBoardChange) => void req
card snippet req
columnHeader snippet
columnActions snippet
emptyColumn snippet
label text Accessible label applied to the board's <section> root via aria-label.
collapsible boolean false When true, each column renders a collapse/expand button that toggles its card list.
reorderColumns boolean true When true (default), columns can be reordered by dragging or keyboard. Set to false to make column order fixed.