Build a kanban board in React with drag and drop

npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

npx shadcn@latest add https://ui.minidev.pro/r/kanban-column.json
npx shadcn@latest add https://ui.minidev.pro/r/issue-card.json
npx shadcn@latest add https://ui.minidev.pro/r/due-date-chip.json
npx shadcn@latest add https://ui.minidev.pro/r/priority-picker.json
npx shadcn@latest add https://ui.minidev.pro/r/assign-picker.json

export type Priority = "low" | "medium" | "high" | "urgent"

export type Issue = {
  id: string
  key: string // "ENG-142"
  title: string
  priority: Priority
  assigneeId?: string
  due?: string // ISO date
}

export type Column = { id: string; title: string; cardIds: string[] }
export type Board = { columns: Column[]; cards: Record<string, Issue> }

export function findColumnId(board: Board, id: string) {
  if (board.columns.some((c) => c.id === id)) return id
  return board.columns.find((c) => c.cardIds.includes(id))?.id
}

import type { ReactNode } from "react"

// add children?: ReactNode to the props, then replace the placeholder <p> with:
{children ? <div className="mt-3 flex items-center gap-2">{children}</div> : null}

"use client"
import { useSortable } from "@dnd-kit/sortable"
import { CSS } from "@dnd-kit/utilities"
import { IssueCard } from "@/components/ui/issue-card"
import { DueDateChip } from "@/components/ui/due-date-chip"
import { cn } from "@/lib/utils"
import type { Issue } from "@/lib/board"

export const PRIORITY_LABEL = { low: "Low", medium: "Medium", high: "High", urgent: "Urgent" }
const short = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })

export function SortableIssue({ issue, status }: { issue: Issue; status: string }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: issue.id })
  const overdue = issue.due ? new Date(issue.due).getTime() < Date.now() : false

  return (
    <div
      ref={setNodeRef}
      style={{ transform: CSS.Transform.toString(transform), transition }}
      className={cn("rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-accent", isDragging && "opacity-40")}
      {...attributes}
      {...listeners}
    >
      <IssueCard id={issue.key} title={issue.title} status={status} priority={PRIORITY_LABEL[issue.priority]}>
        {issue.due ? <DueDateChip date={short.format(new Date(issue.due))} overdue={overdue} /> : null}
      </IssueCard>
    </div>
  )
}

"use client"
import { useDroppable } from "@dnd-kit/core"
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
import { KanbanColumn } from "@/components/ui/kanban-column"
import { cn } from "@/lib/utils"
import type { Column, Issue } from "@/lib/board"
import { SortableIssue } from "./sortable-issue"

export function BoardColumn({ column, cards }: { column: Column; cards: Issue[] }) {
  const { setNodeRef, isOver } = useDroppable({ id: column.id })
  return (
    <KanbanColumn title={column.title} count={cards.length} className="shrink-0">
      <SortableContext id={column.id} items={column.cardIds} strategy={verticalListSortingStrategy}>
        <div ref={setNodeRef} className={cn("flex min-h-24 flex-col gap-2 rounded-lg", isOver && cards.length === 0 && "bg-accent-soft")}>
          {cards.map((issue) => (
            <SortableIssue key={issue.id} issue={issue} status={column.title} />
          ))}
        </div>
      </SortableContext>
    </KanbanColumn>
  )
}

"use client"
import * as React from "react"
import {
  DndContext,
  DragOverlay,
  KeyboardSensor,
  PointerSensor,
  closestCorners,
  useSensor,
  useSensors,
  type DragEndEvent,
  type DragOverEvent,
  type DragStartEvent,
} from "@dnd-kit/core"
import { arrayMove, sortableKeyboardCoordinates } from "@dnd-kit/sortable"
import { IssueCard } from "@/components/ui/issue-card"
import { findColumnId, type Board as BoardData } from "@/lib/board"
import { BoardColumn } from "./board-column"
import { PRIORITY_LABEL } from "./sortable-issue"

export function Board({ initial }: { initial: BoardData }) {
  const [board, setBoard] = React.useState(initial)
  const [activeId, setActiveId] = React.useState<string | null>(null)
  const snapshot = React.useRef<BoardData | null>(null)

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
  )

  function onDragStart({ active }: DragStartEvent) {
    snapshot.current = board
    setActiveId(String(active.id))
  }

  function onDragOver({ active, over }: DragOverEvent) {
    if (!over) return
    const from = findColumnId(board, String(active.id))
    const to = findColumnId(board, String(over.id))
    if (!from || !to || from === to) return
    setBoard((b) => {
      const target = b.columns.find((c) => c.id === to)!
      const overIndex = target.cardIds.indexOf(String(over.id))
      const index = overIndex === -1 ? target.cardIds.length : overIndex
      return {
        ...b,
        columns: b.columns.map((c) => {
          if (c.id === from) return { ...c, cardIds: c.cardIds.filter((id) => id !== active.id) }
          if (c.id === to) return { ...c, cardIds: [...c.cardIds.slice(0, index), String(active.id), ...c.cardIds.slice(index)] }
          return c
        }),
      }
    })
  }

  function onDragEnd({ active, over }: DragEndEvent) {
    setActiveId(null)
    const prev = snapshot.current
    if (!over || !prev) return onDragCancel()
    const colId = findColumnId(board, String(active.id))
    const col = board.columns.find((c) => c.id === colId)!
    const from = col.cardIds.indexOf(String(active.id))
    const to = col.cardIds.indexOf(String(over.id))
    const next =
      to !== -1 && from !== to
        ? { ...board, columns: board.columns.map((c) => (c.id === colId ? { ...c, cardIds: arrayMove(c.cardIds, from, to) } : c)) }
        : board
    setBoard(next)
    void persistMove(String(active.id), prev, next)
  }

  function onDragCancel() {
    setActiveId(null)
    if (snapshot.current) setBoard(snapshot.current)
  }

  // persistMove and announcements: see the next sections

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={onDragStart}
      onDragOver={onDragOver}
      onDragEnd={onDragEnd}
      onDragCancel={onDragCancel}
    >
      <div className="flex items-start gap-3 overflow-x-auto pb-4">
        {board.columns.map((col) => (
          <BoardColumn key={col.id} column={col} cards={col.cardIds.map((id) => board.cards[id])} />
        ))}
      </div>
      <DragOverlay>
        {activeId ? (
          <IssueCard
            id={board.cards[activeId].key}
            title={board.cards[activeId].title}
            status={board.columns.find((c) => c.cardIds.includes(activeId))?.title}
            priority={PRIORITY_LABEL[board.cards[activeId].priority]}
            className="shadow-overlay"
          />
        ) : null}
      </DragOverlay>
    </DndContext>
  )
}

import type { Announcements } from "@dnd-kit/core"

const name = (id: string | number) => board.cards[String(id)]?.key ?? "item"
const column = (id: string | number) => board.columns.find((c) => c.id === findColumnId(board, String(id)))?.title ?? "the board"

const announcements: Announcements = {
  onDragStart: ({ active }) => "Picked up " + name(active.id) + ".",
  onDragOver: ({ active, over }) => (over ? name(active.id) + " is over " + column(over.id) + "." : undefined),
  onDragEnd: ({ active, over }) => (over ? "Dropped " + name(active.id) + " in " + column(over.id) + "." : "Dropped " + name(active.id) + "."),
  onDragCancel: ({ active }) => "Move cancelled. " + name(active.id) + " is back where it started.",
}

<DndContext
  sensors={sensors}
  collisionDetection={closestCorners}
  accessibility={{
    announcements,
    screenReaderInstructions: {
      draggable: "To move an issue, press Space or Enter. Use the arrow keys to move it within and between columns. Press Space or Enter to drop it, or Escape to cancel.",
    },
  }}
  onDragStart={onDragStart}
  onDragOver={onDragOver}
  onDragEnd={onDragEnd}
  onDragCancel={onDragCancel}
>
  {/* columns and DragOverlay as before */}
</DndContext>

async function persistMove(cardId: string, prev: BoardData, next: BoardData) {
  const col = next.columns.find((c) => c.cardIds.includes(cardId))!
  const i = col.cardIds.indexOf(cardId)
  const before = prev.columns.find((c) => c.cardIds.includes(cardId))!
  if (before.id === col.id && before.cardIds.indexOf(cardId) === i) return // nothing changed

  try {
    const res = await fetch("/api/issues/" + cardId + "/move", {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ columnId: col.id, afterId: col.cardIds[i - 1] ?? null, beforeId: col.cardIds[i + 1] ?? null }),
    })
    if (!res.ok) throw new Error("Move failed")
  } catch {
    setBoard(prev)
    showError("Could not move " + next.cards[cardId].key + ". It is back in " + before.title + ".")
  }
}

<PriorityPicker
  value={issue.priority}
  onChange={(p) => updateIssue(issue.id, { priority: p as Priority })}
/>
<AssignPicker
  people={members}
  value={issue.assigneeId}
  onChange={(id) => updateIssue(issue.id, { assigneeId: id })}
/>

npx shadcn@latest add https://ui.minidev.pro/r/<name>.json
# or the package
npm i minidev-ui-kit