Kanban

The Kanban component (ui:kanban) renders a column-based board where cards can be moved between columns using keyboard controls.

Examples

View Glyph Markdown source

```ui:kanban
title: Sprint Board
columns:
  - id: todo
    title: To Do
    cards:
      - id: auth
        title: Implement Auth
        description: OAuth2 + JWT tokens
        priority: high
        tags: [backend, security]
      - id: dashboard
        title: Build Dashboard
        priority: medium
  - id: progress
    title: In Progress
    limit: 3
  - id: done
    title: Done
```

Empty board

Properties

Property	Type	Required	Default	Description
title	string	No	—	Optional heading.
columns	KanbanColumn[]	Yes	—	Board columns (min 1).

KanbanColumn

Property	Type	Required	Default	Description
id	string	Yes	—	Column identifier.
title	string	Yes	—	Column heading.
cards	KanbanCard[]	No	[]	Cards in this column.
limit	number	No	—	WIP limit indicator.

KanbanCard

Property	Type	Required	Description
id	string	Yes	Card identifier.
title	string	Yes	Card title.
description	string	No	Card description.
priority	"high" | "medium" | "low"	No	Priority indicator.
tags	string[]	No	Card tags.

Interaction events

Event kind: kanban-move

Payload field	Type	Description
cardId	string	Moved card ID.
cardTitle	string	Moved card title.
sourceColumnId	string	Original column.
destinationColumnId	string	Target column.
position	number	Position in target column.
allColumns	Array<{ id, title, cardIds }>	Full board state.

Accessibility

• Columns use role="listbox", cards use role="option".
• Keyboard: Space to grab, Arrow Left/Right between columns, Up/Down within, Escape to cancel.
• aria-live="assertive" during drag operations.