Project board
ProA living workflow board for moving work between stages.
Live block · sample data
- A compact kanban with a handful of tasks across fixed stages.
- Boards where moving tasks should be accessible through explicit buttons, not drag only.
- Use reorderable-list when order within one list matters more than stages.
- Use timeline for a dated sequence of events.
- Add drag and drop and virtualization, or use a dedicated board library, for large boards.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to track a focused set of work across stages. Connect its local card actions to your project data.
example.tsx
import { ProjectBoard } from "@/components/arc/blocks/project-board/project-board"; export function Board() { return ( <ProjectBoard onTaskMove={(task) => updateTask(task.id, { stage: task.stage })} /> );}ProjectBoard
A four-stage board (Planned, In progress, Review, Done) with a sprint progress bar, per-column counts, arrow buttons to move cards, an All work / My work filter, and an add task action. Tasks and owner portraits are sample data.
PropTypeDefaultDescription
onTaskMove(task: { id: string; title: string; stage: "Planned" | "In progress" | "Review" | "Done" }) => void–Called after a task moves to its new stage.- Each card has explicit buttons labeled "Move <task> to <stage>" instead of drag only.
- Moves are announced in a visually hidden role="status" region.
- Each column is a section labelled "<stage>, <n> tasks"; the filter buttons use aria-pressed.
- Cards travel between columns with a per-card layoutId on the gentle spring; new cards scale in from 0.98.
- The filter highlight glides between All work and My work, and the progress bar grows with scaleX.
- Reduced motion drops the layoutId and springs, so cards and bars change in place.
- The four columns need 820px; narrower boards scroll horizontally with proximity snap to each column.
- Below 700px each column is up to 78vw wide, team avatars hide, and padding tightens; below 400px the add button becomes icon only.
- Moves use buttons, so touch never needs a drag gesture.
- Cards move between columns with a per-card layoutId, which measures layout on each move.
- No virtualization; keep boards to dozens of cards rather than hundreds.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a compact kanban of a few tasks. For large boards add virtualization and drag and drop.
- Replace initialTasks, the stages list, and the owner portraits; addTask cycles through sample draft titles.
- Owner portraits render with next/image from lib/media.
- Wire onTaskMove to persist the stage change.
The full library index for assistants is at /llms.txt.
