Kanban Board

Blocks & Slices

A drag-and-drop task board (no DnD deps): pointer-drag cards to reorder within a column or move across columns, with a pointer-tracking overlay, a dashed placeholder gap, Motion layout springs, and a cubic-bezier drop settle. Full Ctrl/Cmd+arrow keyboard moves announced via a live region. Under prefers-reduced-motion there is no lift easing, gliding gap or settle — moves land instantly on a legible static list.

Inspired by Watermelon UI — task board — independently built, not affiliated. Attribution policy

To Do

Design
Design the empty states
Docs
Write the API reference

In Progress

Feature
Rebuild the auth flow

Done

Growth
Ship the pricing page

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/kanban-board.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/kanban-board.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-[520px] px-1">
    <KanbanBoard
      columns={[
        {
          id: "todo",
          title: "To Do",
          cards: [
            { id: "a1", title: "Design the empty states", tag: "Design", color: "#8b5cf6" },
            { id: "a2", title: "Write the API reference", tag: "Docs", color: "#22d3ee" },
          ],
        },
        {
          id: "doing",
          title: "In Progress",
          cards: [
            { id: "b1", title: "Rebuild the auth flow", tag: "Feature", color: "#ec4899" },
          ],
        },
        {
          id: "done",
          title: "Done",
          cards: [
            { id: "c1", title: "Ship the pricing page", tag: "Growth", color: "#f5a623" },
          ],
        },
      ]}
    />
  </div>

Props

KanbanBoardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">

Prop	Type	Default	Description
columns	KanbanColumn[]	—	Columns and their cards. Ships a small default board when omitted.
onChange	(columns: KanbanColumn[]) => void	—	Fired with the next board after any move (drag drop or keyboard).

npm dependencies

motion