Project board

A React block (a whole screen) in Beamline's Blocks category.

A team's sprint as a board: the sprint's goal, points done and days left, filters by person and label, the work as cards in columns with work-in-progress limits, moves that are applied at once and refused with the reason, and a card opened beside the board with its details, estimate and discussion.

Use it for

A team's day-to-day work by stage: a sprint, a support escalation board, a content pipeline, a hiring loop.

Not for

Many projects at a glance (projects).
A sales pipeline with values and odds (crm).

Anatomy

app shell (your navigation, team mark), New task in the top bar
sprint header: name, dates and goal; points done of committed, days left, cards blocked
filters: people as chips with counts, labels, search
board: Backlog · To do · In progress · In review · Done, with work-in-progress limits; cards show key, title, labels, assignees, due, estimate and checklist progress
card sheet: title (rename in place), status, assignee, estimate, priority, description and the card's discussion

States

loading (skeleton cards in every column)
failed to load (the error with Try again)
no cards match the filters (Clear filters)
a move applied, saving, refused (the card goes back; the reason sits above the board with Try again)
a move the rules refuse before it is sent (the column says why: its limit, or a review first)
over a work-in-progress limit (the column warns)
estimate not set (hatched)

Keyboard

the board's own: arrows between cards, Space lifts and walks a card, Enter opens it
Esc closes the card sheet and focus returns to the card
filters and search: Tab, Space

Motion

Cards make room as one travels and settle into place (the board's own); points done roll as cards reach Done; a refused move slides the card back. Reduced motion: places at once.

Props

Prop	Type	Default	Description
`cards / defaultCards / onCardsChange`	`BoardCard[]`	—
`columns`	`KanbanColumn[]`	—	Default Backlog, To do, In progress (limit 4), In review (limit 3), Done.
`onMove`	`(move: KanbanMove) => Promise<void> \| void`	—	Applied at once; a rejection puts the card back and shows why.
`canMove`	`(card, to, index) => true \| string`	—	Rules checked before anything is sent.
`onCardChange`	`(id: string, patch: Partial<BoardCard>) => Promise<void> \| void`	—
`onCreate`	`(column?: string) => void`	—	Shows New task and each column's Add card.
`comments / defaultComments / onCommentsChange`	`Record<string, ThreadComment[]>`	—
`sprint`	`{ name: string; start: number; end: number; goal?: string }`	—
`people`	`{ name: string; src?: string }[]`	—
`me`	`string`	—
`loading / error / onRetry`	`boolean / Error \| null / () => void`	—
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

Dependencies

lucide-react

Import

import { ProjectBoard } from "@/blocks/project-board/project-board";

Get it

Project board is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent