@mshafiqyajid/react-kanban

npm install @mshafiqyajid/react-kanban

import { useState } from "react";
import { KanbanStyled } from "@mshafiqyajid/react-kanban/styled";
import type { KanbanColumn } from "@mshafiqyajid/react-kanban";
import "@mshafiqyajid/react-kanban/styles.css";

const initial: KanbanColumn[] = [
  { id: "todo",  title: "To Do",       cards: [], accent: "blue"   },
  { id: "doing", title: "In Progress", cards: [], accent: "amber", wipLimit: 3 },
  { id: "done",  title: "Done",        cards: [], accent: "green"  },
];

export default function Board() {
  const [columns, setColumns] = useState<KanbanColumn[]>(initial);
  return (
    <KanbanStyled
      columns={columns}
      onChange={setColumns}
      tone="primary"
      searchable
      selectable
      columnReorderable
      addCardPlaceholder="Add card"
      addColumnPlaceholder="Add column"
    />
  );
}

const cards = [
  {
    id: "k1",
    content: "Migrate billing portal",
    description: "Move to v3 SDK before launch.",
    priority: "urgent",
    tags: ["billing", "infra"],
    dueDate: "2026-06-01",
    assignees: [
      { id: "u1", name: "Maya Linn",  color: "#a78bfa" },
      { id: "u2", name: "Sam Vega",   color: "#f97316" },
    ],
    checklist: { done: 3, total: 5 },
    attachments: 2,
    comments: 7,
    cover: "linear-gradient(120deg, #6366f1, #ec4899)",
  },
];

import { useKanban } from "@mshafiqyajid/react-kanban";

const {
  columns,
  drag,
  selection,
  getBoardProps,
  getCardProps,
  getColumnDropProps,
  getColumnHandleProps,
  addCard,
  removeCard,
  moveCard,
  reorderColumn,
} = useKanban({
  defaultColumns: [
    { id: "todo", title: "To Do", cards: [{ id: "1", content: "Ship docs" }] },
    { id: "done", title: "Done", cards: [] },
  ],
  reorderable: true,
  columnReorderable: true,
});

return (
  <div {...getBoardProps()} className="board">
    {columns.map((col) => (
      <div key={col.id} {...getColumnDropProps(col.id)} className="col">
        <header {...getColumnHandleProps(col.id)}>{col.title}</header>
        {col.cards.map((card) => (
          <div key={card.id} {...getCardProps(card.id, col.id)}>
            {card.content}
          </div>
        ))}
      </div>
    ))}
  </div>
);

// Built-in board-level search bar
<KanbanStyled columns={columns} onChange={setColumns} searchable searchPlaceholder="Search cards…" />

// Or supply your own predicate
<KanbanStyled
  columns={columns}
  onChange={setColumns}
  filter={(card) => card.priority === "urgent" || card.priority === "high"}
/>

const columns: KanbanColumn[] = [
  { id: "todo",  title: "To Do",      cards: [], accent: "blue"   },
  { id: "doing", title: "In Progress", cards: [], accent: "amber", wipLimit: 3 },
  { id: "block", title: "Blocked",    cards: [], accent: "red", locked: true },
  { id: "done",  title: "Shipped",    cards: [], accent: "green"  },
];

interface KanbanCard<TData = unknown> {
  id: string;
  content: string;
  description?: string;
  label?: string;
  priority?: "low" | "medium" | "high" | "urgent";
  assignees?: { id: string; name: string; initials?: string; color?: string; avatarUrl?: string }[];
  dueDate?: string | Date | null;
  tags?: string[];
  checklist?: { done: number; total: number };
  attachments?: number;
  comments?: number;
  cover?: string; // any CSS background
  data?: TData;
}