Data Display

Kanban

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

Import

tsx

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

bash

npx cooud-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" />;
}

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.