Kanban

Practical React example

A small project board can show tasks in Backlog, In progress and Done. Store the status on each card, then render cards through the column they belong to.

A typed project board controlled by React state

"use client";

import { useState } from "react";
import {
  KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanProvider,
} from "@/components/kibo-ui/kanban";

type Task = { id: string; name: string; column: string };
const columns = [
  { id: "backlog", name: "Backlog" },
  { id: "active", name: "In progress" },
  { id: "done", name: "Done" },
];
const initialTasks: Task[] = [
  { id: "task-1", name: "Write the brief", column: "backlog" },
  { id: "task-2", name: "Review the layout", column: "active" },
];

export function ProjectBoard() {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  return (
    <section aria-label="Project tasks" className="overflow-x-auto">
      <KanbanProvider
        className="min-w-[36rem]"
        columns={columns}
        data={tasks.map((task) => ({ ...task }))}
        onDataChange={(next) => setTasks(next.map((task) => ({ ...task })))}
      >
        {(column) => (
          <KanbanBoard id={column.id} key={column.id}>
            <KanbanHeader>{column.name}</KanbanHeader>
            <KanbanCards id={column.id}>
              {(task: Task) => <KanbanCard key={task.id} {...task} />}
            </KanbanCards>
          </KanbanBoard>
        )}
      </KanbanProvider>
    </section>
  );
}

Each card needs a stable id, name and column matching a real column id. This source changes a card’s column during drag-over and shallow-copies the array; the example copies the records on input and output to protect React state objects.

Customization

columns / data / onDataChange

The provider is controlled. Update your data in onDataChange to reflect a move or reorder. Extra card fields can carry an assignee or due date for custom card contents.

KanbanBoard / KanbanCards / KanbanCard

The board and card-list ids identify a column. Each card id identifies a task. Children let you customise the card; the default card displays its name.

onDragStart / onDragOver / onDragEnd

These are optional event callbacks. Data can change before drag-end, so onDragEnd alone is not a complete persistence strategy.

Integration notes

• Local movement does not save anything. Add server authorization, valid status-transition checks, stable ordering and conflict handling before persisting updates; avoid a write for every drag-over event.
• Keyboard sensors and announcements are present, but test a complete keyboard and screen-reader journey with your card contents. Provide an explicit move-to-column action when drag interaction is insufficient.
• Small screens need a scrollable board or an alternative list. This source does not supply virtualization, collaborative sync, undo or an implemented drag-cancel rollback.

Component source: Kibo UI documentation ↗. These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.