# Project board > A 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. - Type: Screen (a complete app view, installed as a block) - Page: https://uiarc.dev/components/screens/project-board - Markdown: https://uiarc.dev/components/screens/project-board/markdown - Access: Arc Pro - Registry id: `project-board` - Source file: `registry/blocks/project-board/project-board.tsx` - Built from: Button, Avatar, Motion - Keywords: react project overview, project dashboard, project management screen, milestone tracker, task list with drag to reorder, linear style project page Use this to track a focused set of work across stages. Connect its local card actions to your project data. ## When to use - 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. ## When not to use - 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 Project board is part of Arc Pro. The live preview is public; the source and install command need Pro. ### CLI with a Pro token 1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it. ```bash export ARC_PRO_TOKEN=arc_pro_... ``` 2. Add the Pro registry to `components.json`: ```json { "registries": { "@uiarc": "https://uiarc.dev/r/{name}.json", "@uiarc-pro": { "url": "https://uiarc.dev/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${ARC_PRO_TOKEN}" } } } } ``` 3. Install: ```bash npx shadcn@latest add @uiarc-pro/project-board ``` ### Manual Signed-in Pro members can copy the source from the Manual tab on the docs page. - Plans: https://uiarc.dev/pricing - Create a Pro token: https://uiarc.dev/account#pro-access - Setup guide: https://uiarc.dev/docs/ai#pro-access ## Usage ```tsx import { ProjectBoard } from "@/components/arc/blocks/project-board/project-board"; export default function ProjectPage() { return (
updateTask(task.id, { stage: task.stage })} />
); } ``` ## API reference ### 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. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `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. | | `defaultProject` | `string` | `"checkout"` | The project that opens first: "checkout", "mobile", "api" or "brand". | | `className` | `string` | – | Extra class on the root element. | ## Accessibility - 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 " or "Reopen " 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. ## Motion - 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. ## Responsive behavior - 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. ## Performance - 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 - 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. ## Related - [Kanban board](https://uiarc.dev/components/screens/kanban-board/markdown): A complete project board inside the Arc app shell, with projects, saved views and live cycle progress in the sidebar, filters for priority, labels and assignee, and cards you can drag between columns or swimlanes. A details panel slides over the board to edit status, priority, assignee, labels, estimate and due date, with sub-issues, linked pull requests, activity and comments. - [Gantt timeline](https://uiarc.dev/components/screens/gantt-timeline/markdown): A roadmap app screen where you drag gantt bars to reschedule, follow dependency arrows past a today line, zoom by day, week or month, and group by phase, team or owner. Selecting a task opens a details panel for owner, dates and progress, and the same plan also shows as a sortable list and an updates feed. - [Activity feed](https://uiarc.dev/components/blocks/activity-feed/markdown): A team activity feed grouped by day on a quiet avatar timeline, with a type filter, a live new updates button, expandable details, and a mark all read sweep. ## Guidance for AI tools Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it. Full library index: https://uiarc.dev/llms.txt