🚀 Introducing react-kanban-kit A Lightweight & Customizable Kanban Component for React

hazem — Sat, 16 Aug 2025 12:50:58 +0000

Hi everyone,
I’m excited to share react-kanban-kit, an open-source Kanban board package I’ve been working on!

If you’ve ever needed a Kanban-style task board in your React project, you know how tricky it can be to balance simplicity, customization, and performance. That’s exactly why I built react-kanban-kit.

Features

✅ Lightweight and easy to integrate
✅ Drag-and-drop support (powered by Atlassian's pragmatic-drag-and-drop)
✅ Fully customizable (cards, columns, styles)
✅ TypeScript support
✅ Minimal dependencies

Installation

npm install react-kanban-kit

Basic Usage

import { Kanban } from "react-kanban-kit";

const MyKanbanBoard = () => {
  const dataSource = {
    root: {
      id: "root",
      title: "Root",
      children: ["col-1", "col-2", "col-3"],
      totalChildrenCount: 3,
      parentId: null,
    },
    "col-1": {
      id: "col-1",
      title: "To Do",
      children: ["task-1", "task-2"],
      totalChildrenCount: 2,
      parentId: "root",
    },
    "col-2": {
      id: "col-2",
      title: "In Progress",
      children: ["task-3"],
      totalChildrenCount: 1,
      parentId: "root",
    },
    "col-3": {
      id: "col-3",
      title: "Done",
      children: ["task-4"],
      totalChildrenCount: 1,
      parentId: "root",
    },
    "task-1": {
      id: "task-1",
      title: "Design Homepage",
      parentId: "col-1",
      children: [],
      totalChildrenCount: 0,
      type: "card",
      content: {
        description: "Create wireframes and mockups for the homepage",
        priority: "high",
      },
    },
    "task-2": {
      id: "task-2",
      title: "Setup Database",
      parentId: "col-1",
      children: [],
      totalChildrenCount: 0,
      type: "card",
    },
    // ... more tasks
  };

  const configMap = {
    card: {
      render: ({ data, column, index, isDraggable }) => (
        <div className="kanban-card">
          <h3>{data.title}</h3>
          {data.content?.description && <p>{data.content.description}</p>}
          <div className="card-meta">
            {data.content?.priority && (
              <span className={`priority ${data.content.priority}`}>
                {data.content.priority}
              </span>
            )}
          </div>
        </div>
      ),
      isDraggable: true,
    },
  };

  return (
    <Kanban
      dataSource={dataSource}
      configMap={configMap}
      onCardMove={(move) => {
        console.log("Card moved:", move);
        // Handle card movement
      }}
      onColumnMove={(move) => {
        console.log("Column moved:", move);
        // Handle column reordering
      }}
    />
  );
};

Why I Built This

Most Kanban libraries are either too heavy or hard to customize. I wanted something:

Simple enough to drop into any React project
Flexible enough for real-world apps (task management, project boards, etc.)
Developer-friendly (TypeScript, customizable UI...)

Docs & GitHub