Kanban Board

A composable drag-and-drop Kanban board. Cards are draggable across columns using the native HTML5 drag API. Columns highlight on drag-over and call onDrop to let you update state externally.

Backlog

Design system audit

Design

Review token usage across all components.

Performance profiling

Eng

Identify bundle size regressions.

In Progress

Dark mode tokens

Design

Update semantic colour tokens for dark theme.

Done

Accessibility audit

All components pass WCAG 2.1 AA.

import { KanbanBoard } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add kanban

Import

import.tsx

import { KanbanBoard, KanbanColumn, KanbanCard } from "@aetherstack/patterns"
import type { KanbanItem } from "@aetherstack/patterns"

Usage

kanban-board.tsx

import * as React from "react"
import { KanbanBoard } from "@aetherstack/patterns"
import type { KanbanItem } from "@aetherstack/patterns"

const INITIAL_COLUMNS = [
  {
    title: "Backlog",
    items: [
      { id: "1", title: "Design system audit", badge: "Design" },
    ],
  },
  { title: "In Progress", items: [] },
  { title: "Done",        items: [] },
]

export function MyKanban() {
  const [columns, setColumns] = React.useState(INITIAL_COLUMNS)

  function handleDrop(item: KanbanItem, targetTitle: string) {
    setColumns((prev) =>
      prev.map((col) => {
        if (col.items.some((i) => i.id === item.id)) {
          return { ...col, items: col.items.filter((i) => i.id !== item.id) }
        }
        if (col.title === targetTitle) {
          return { ...col, items: [...col.items, item] }
        }
        return col
      })
    )
  }

  return (
    <KanbanBoard
      columns={columns.map((col) => ({
        ...col,
        onDrop: handleDrop,
      }))}
    />
  )
}

Props

Prop	Type	Default	Description
columns*	KanbanColumnProps[]	—	Column definitions with title, items array, and optional onDrop callback.
className	string	—	Additional classes on the board wrapper.

* Required

Accessibility

→The board wrapper has role="region" aria-label="Kanban board".
→Cards are draggable — keyboard drag-and-drop is not supported by the native HTML5 drag API; add a separate accessible reorder mechanism for keyboard users in production.
→Card titles are text; badges use the Badge primitive with semantic variant.
→Empty column drop targets are visually indicated with a dashed border.