Display

Kanban

Drag-and-drop board with cards that reorder and move across columns.

Import

tsx

import { Kanban } from "@cronus-ui/ui";

bash

npx cronus-ui add kanban

Examples

Board

A controlled drag-and-drop board. Cards reorder within a column and move across columns; `onColumnsChange` hands you the next state to store. Drag with the pointer or focus a card's handle and use the arrow keys.

To do

Draft the launch postOutline the key talking points.
Audit onboarding copy
Collect customer quotesReach out to 3 design partners.

In progress

Wire up the billing pageHook the plan picker to checkout.
Polish empty states

Done

Ship the new docs themeDark mode shipped.

tsx

const INITIAL_BOARD: KanbanColumn[] = [
  {
    id: "todo",
    title: "To do",
    items: [
      { id: "t-1", title: "Draft the launch post", description: "Outline the key talking points." },
      { id: "t-2", title: "Audit onboarding copy" },
      {
        id: "t-3",
        title: "Collect customer quotes",
        description: "Reach out to 3 design partners.",
      },
    ],
  },
  {
    id: "in-progress",
    title: "In progress",
    items: [
      {
        id: "p-1",
        title: "Wire up the billing page",
        description: "Hook the plan picker to checkout.",
      },
      { id: "p-2", title: "Polish empty states" },
    ],
  },
  {
    id: "done",
    title: "Done",
    items: [{ id: "d-1", title: "Ship the new docs theme", description: "Dark mode shipped." }],
  },
];

function KanbanDemo() {
  const [columns, setColumns] = useState<KanbanColumn[]>(INITIAL_BOARD);
  return <Kanban columns={columns} onColumnsChange={setColumns} aria-label="Project board" />;
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component KanbanDefault layout:inline style:kanban {
  aria-label:"Board"
  label "Board"
  text "Todo"
  text "Ship"
  text "Doing"
  text "Review"
}

page "/audit/kanban/default" type:custom {
  use KanbanDefault
}

API Reference

Generated from the component's exported types.

KanbanProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">

Prop	Type	Default	Description
`columns`*	`KanbanColumn[]`	—	The board's columns and their cards (controlled).
`onColumnsChange`*	`(next: KanbanColumn[]) => void`	—	Called with the next columns after a reorder/move. The consumer owns state.
`renderItem`	`(item: KanbanItem) => ReactNode`	—	Render a card's body. Defaults to the item's title + description in a Card-like tile. The drag handle and tile chrome are always provided.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.