@mshafiqyajid/react-kanban
Headless kanban hook and styled component. HTML5 Drag and Drop API — no external DnD library. Columns, cards, inline card creation, custom renderers.
Playground #
To Do3
Design system tokens
Set up CI pipeline
Write onboarding docs
In Progress2
Component library
Docs site
Done1
Monorepo setup
Props
TSX
import { KanbanStyled } from "@mshafiqyajid/react-kanban/styled";
import "@mshafiqyajid/react-kanban/styles.css";
<KanbanStyled
columns={columns}
onChange={setColumns}
/>Install #
npm install @mshafiqyajid/react-kanbanQuick start #
import { KanbanStyled } from "@mshafiqyajid/react-kanban/styled";
import type { KanbanColumn } from "@mshafiqyajid/react-kanban";
import "@mshafiqyajid/react-kanban/styles.css";
const [columns, setColumns] = useState<KanbanColumn[]>([
{ id: "todo", title: "To Do", cards: [] },
{ id: "doing", title: "In Progress", cards: [] },
{ id: "done", title: "Done", cards: [] },
]);
<KanbanStyled columns={columns} onChange={setColumns} tone="primary" />API #
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | KanbanColumn[] | — | Board columns with cards |
| onChange | (cols) => void | — | Called when columns/cards change |
| renderCard | (card, col) => ReactNode | — | Custom card renderer |
| renderColumnHeader | (col) => ReactNode | — | Custom column header |
| addCardPlaceholder | string | — | Show an "add card" affordance with this placeholder text |
| columnMinWidth | string | "240px" | Minimum column width |
| maxColumns | number | — | Limit the number of visible columns |
| size | "sm" | "md" | "lg" | "md" | Card and text size |
| tone | "neutral" | "primary" | "neutral" | Accent color |
| disabled | boolean | false | Disable drag and card creation |
| onCardAdd | (card, columnId) => void | — | Card added callback |
| onCardRemove | (card, columnId) => void | — | Card removed callback |
| onCardMove | (card, from, to) => void | — | Card moved between columns callback |
| addColumnPlaceholder | string | — | Shows "+ Add column" button with this label |
| maxCardsPerColumn | number | — | Per-column card limit |
| cardDraggable | boolean | (card, col) => boolean | true | Control per-card drag |
| collapsible | boolean | false | Columns can collapse |