Components

KanbanBoard

Cards in status columns that people move by dragging (mouse, pen or touch) or with the keyboard through each card’s menu. Controlled: it reports moves, you update the list.

Usage

Use it for:

  • Work moving through stages: tasks by status, deals by stage, tickets by queue.
  • Boards of up to a few hundred cards.

Avoid it when:

  • Comparing many fields per item: use DataTable (offer both views).
  • Items placed in time: use Timeline.
  • A single ordered list: a sortable list is simpler.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Sprint board

To do2 items

  • T-1
    Write the project brief
  • T-2
    Sketch three layouts

In progress1 item

  • T-3
    Build the pricing page

Done1 item

  • T-4
    Set up analytics

Quick add, empty columns and extra actions

To do2 items

  • Write the project brief
  • Sketch three layouts

In progress0 items

  • Drop tasks here

Done0 items

  • Drop tasks here

API Reference

KanbanBoard

A <div> holding the scroll region and a live region; other <div> props are forwarded. Generic over your item type.

PropTypeDefault
columns
KanbanColumn[]
items
Item[]
getItemId
(item) => string
getColumnId
(item) => string
getItemLabel
(item) => string
renderCard
(item, { dragging, actions }) => ReactNode
onMove
(move: KanbanMove) => void
onQuickAdd
(columnId, title) => void
quickAddLabel
string
"Add item"
defaultQuickAddColumnId
string
columnActions
(column) => ReactNode
itemActions
(item, parts) => ReactNode
emptyColumnText
ReactNode
"No items"
columnWidth
number
272
label
string
"Board"
className
string

Accessibility

Keyboard:

  • Tab: moves through the cards’ own links and each card’s actions button.
  • Enter / Space on the actions button: opens the menu with “Move to…” (→ opens the column list), “Move up” and “Move down”. The same menu opens on right-click.
  • Escape: cancels a pointer drag in progress.

ARIA and semantics:

  • The board is a named region that scrolls sideways; each column is a section labelled by its heading (title + count), its cards a list.
  • Every pick-up, move and cancel is announced in a polite live region (“Moved Write the project brief to Done, position 1 of 2.”), following the WAI-ARIA drag-and-drop guidance of a keyboard alternative plus announcements.
  • Pointer drag works with mouse and pen after 5px of movement, and with touch after a 250ms press, so swipes still scroll. The floating copy is aria-hidden and inert.
  • Lift and drop-line animations (.motion-lift, .motion-drop) are removed under reduced motion.
© 2026 Motion. Internal documentation.