Project board
ProA full project overview screen: live progress stats, a milestone track that picks the task list, recent activity and a team panel. Tasks group by stage with filters and drag to reorder, and the task panel edits fields, subtasks and comments in place.
- A project home that answers how a project is going: progress, milestones, what is due, who is on it and what changed.
- Product or delivery tools where a project groups tasks into dated milestones and people need both an overview and a working task list.
- Use kanban-board when moving cards between stage columns is the main job.
- Use gantt-timeline when dates and dependencies across many tasks matter more than status.
- Use activity-feed on its own for a standalone log without projects or tasks.
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.
import { ProjectBoard } from "@/components/arc/blocks/project-board/project-board"; export default function ProjectPage() { return ( <div style={{ height: "100dvh" }}> <ProjectBoard defaultProject="checkout" onTaskMove={(task) => updateTask(task.id, { stage: task.stage })} /> </div> );}ProjectBoard
A full project overview screen built on the screen shell. The sidebar is a portfolio: each project with its icon, the next milestone and a ring that fills with completed work in the colour of its health. The overview has a project summary with a status picker, four live stats and a milestone track that picks the task list below it. The Tasks tab groups work by stage with filters and drag to reorder, and the Activity tab is a filterable log. Home, My tasks and an inbox sit above the projects. The right panel shows the team and links, or the selected task with editable fields, subtasks and comments. Built from Arc's Tabs, SegmentedControl, Popover, Badge, Progress, AnimatedCounter, Avatar, AvatarGroup, Checkbox, Input, Textarea, Button, Tooltip and Kbd. The Tidewater workspace, people and dates (Nov 2026) are local sample data.
onTaskMove(task: { id: string; title: string; stage: "Planned" | "In progress" | "Review" | "Done" }) => void–Called after a task changes stage, from the status ring, the status picker or the X key.defaultProjectstring"checkout"The project that opens first: "checkout", "mobile", "api" or "brand".classNamestring–Extra class on the root element.- Overview, Tasks and Activity are Arc's Tabs with arrow keys; the milestone track and the week strip are radiogroups that move with the arrow keys.
- Arrow keys move between task and activity rows, Enter opens a task, X completes the focused task and Alt with an arrow reorders it. C starts a new task anywhere outside a text field.
- The status ring is a button labelled "Complete <task>" or "Reopen <task>" with aria-pressed, so stages never depend on colour; overdue dates also say "Overdue" to screen readers.
- Pickers are listboxes inside Arc's Popover: focus moves to the chosen option, Escape and an outside press close them and return focus to the trigger.
- Sidebar projects are buttons with aria-current on the open project; each reads its completion and health in words, so the ring never carries meaning alone.
- Reorders and copied links are announced in visually hidden role="status" regions; subtasks are Arc Checkboxes, and unread inbox items say "Unread" to screen readers.
- Pages and the right panel change with one crossfade from the shared motion tokens; opening a task swaps the panel content without moving the page.
- Stats roll to new values with Arc's AnimatedCounter, and progress, milestone and workload bars grow on the smooth spring.
- Selected milestones, days and sidebar projects fill in place; nothing flies between items. Rows reorder with Reorder on the smooth spring, constrained to their group.
- Reduced motion makes every change instant while keeping the same states and focus.
- Below 1080px the details panel becomes a sheet opened from the header or by selecting a task; below 900px the sidebar becomes a sheet from the menu button.
- Below 680px the stats become a two by two grid and row tags hide.
- Below 600px the page goes edge to edge, Share hides, New task is icon only and the milestone track scrolls sideways with edge fades.
- All lists render in full with no virtualization; keep a project to dozens of tasks.
- Rows in the Tasks tab measure layout while reordering, inside a layoutScroll container.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- The screen fills its parent's height; in the bare frame it is fixed to the viewport. Give it a parent with a definite height.
- Replace seedProjects, seedMilestones, seedTasks and seedActivity in project-board-data.ts with your records; milestone progress, stats, counts and the inbox are all derived from them.
- Wire onTaskMove to persist stage changes; other edits (title, assignee, priority, due date, subtasks, comments, order) live in local state you can lift out.
- Brand marks (Figma, GitHub, Stripe) are inline sample content in project-board-marks.tsx. People use the seeded avatars from lib/media.
The full library index for assistants is at /llms.txt.