Task Board

Kanban board with drag and drop, quick add, a detail panel, search, label filters and a compact view.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/task-board.json · Import from @/components/ui/task-board

When to use

Sprint and project boards in a product, with tasks moving through a few statuses
Internal tools where people sort work by dragging it

When not to use

Hundreds of tasks per column – add virtualisation and server-side filters
Touch-first apps – native drag and drop needs a mouse; offer the detail panel's status buttons instead

Usage

import { TaskBoard } from "@/components/ui/task-board";

export function Sprint({ tasks }) {
  return (
    <TaskBoard
      tasks={tasks}
      statuses={statuses}
      labels={labels}
      people={people}
      path={["Northwind", "Launch", "Sprint 12"]}
      onChange={save}
    />
  );
}

Props

Name	Type	Description
`tasks`	`Task[]`	key, title, status, priority (0–4), estimate, labels, assignee, dueIn, subtasks, pullRequest, created
`statuses`	`TaskStatus[]`	Columns in order: id, label and icon
`labels`	`TaskLabel[]`	id, label and color – used on cards, in the filter and in the panel
`people`	`TaskPerson[]`	id, name and avatar for assignees
`path`	`string[]`	Breadcrumb above the board
`onChange`	`(tasks: Task[]) => void`	Called with all tasks after every move, edit, add or delete

Keyboard

Tab: Move through the toolbar, columns and cards
Enter / Space: Open the focused card in the detail panel
Escape: Close the detail panel or cancel a new task

Accessibility

Every card is focusable and opens a panel where status, priority, labels and assignee are plain toggle buttons – no dragging needed
The star, compact view and filter are pressed or checked toggles; the breadcrumb marks the current page

Responsive

Columns keep a minimum width and the board scrolls sideways on narrow screens
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19