Cards in columns moved by drag and drop — and by the keyboard (Space, the arrows, Space) — every move announced, column limits in the counts.

WebBetaData display

Web only — React, from @krizaka/ui/kanban. Beta: its API may still change in a minor version.

When to use

Orochia's moderation queue: to review, reviewing, resolved.
A release plan, a support queue.

When not to use

On a phone: a segmented list per column moves cards with an action sheet.Use instead: Segmented
For an ordered list without stages.Use instead: List

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Kanban } from "@krizaka/ui/kanban";

Examples

Moderation queue

Reports moved between three stages, the first column limited.

To review

2/3

Backflip on the beachDangerous act
Cover of the summer hitCopyright

Reviewing

Night driveCopyright

Resolved

Q&A with fansSpam

Props

A board of cards in columns — a moderation queue, a release plan: drag and drop with the pointer, or Space and the arrow keys, every step announced. Column limits show in the counts.

Prop	Type	Default	Description
`aria-label`required	`string`	—	The board's accessible name (“Moderation queue”).
`cards`required	`readonly T[]`	—	The cards, in their order within each column.
`columns`required	`readonly KanbanColumn[]`	—	The columns, in order.
`getColumn`required	`(card: T) => string`	—	A card's column.
`getId`required	`(card: T) => string`	—	A card's id.
`getTitle`required	`(card: T) => string`	—	A card's name, for the announcements.
`onMove`required	`(move: KanbanMove) => void`	—	Called when a card is dropped somewhere new: update the data here.
`renderCard`required	`(card: T) => ReactNode`	—	What a card shows.
`className`	`string`	—	Classes merged on the root.
`labels`	`Partial<KanbanLabels>`	—	The words, passed translated; English by default.

Accessibility

Every pick, move, drop and cancel is announced in words (labels).
Each card describes how to move it; each column is a named region.

Keyboard

Keys	Action
`Space / Enter`	Picks the focused card up, or drops the carried one.
`Arrow Left / Arrow Right`	Carry the card to the previous or next column.
`Arrow Up / Arrow Down`	Move it within its column.
`Esc`	Puts the card back where it was.

Best practices

Update the data in onMove: the board shows cards as given.
Set limit on the columns that must not overflow.

Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Kanban