Projects

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

A team's projects: the portfolio by health (on track, at risk, off track) with progress, lead, team and due date, filtered and searched; a project opens in place to its overview — health and the latest status update, milestones, task mix, team and the update history — where posting the weekly update is the one primary action.

Use it for

A project management or PMO screen: see which projects need attention, open one, read where it stands and post its status update.

Not for

Moving tasks across stages (project-board).
Scheduling people over days (team-calendar).

Anatomy

app shell (your navigation, workspace mark), New project in the top bar
portfolio: health chips with counts, search, then a table (name and lead, health, progress, team, due) whose rows open the project
overview (in place, with Back): name (rename in place), health and the latest update, progress, milestones as steps, tasks by state, team, key dates
status update: health (On track · At risk · Off track) and what changed — Post update is the overview's primary action — then the history of updates

States

loading (rows hold their shape)
failed to load (the error with Try again)
no projects (New project offered)
no project matches (Clear filters)
a due date passed (late, said in words)
progress or tasks not measured (hatched)
update posting, posted, refused (taken back; the text returns with the reason)

Keyboard

Tab reaches the chips, search and each row's name button; Enter opens the project
Back (or Esc in the overview) returns to the portfolio and focus returns to the row
⌘Enter posts the update

Motion

Rows slide as filters narrow the portfolio (TableBody flip); opening a project swaps the list for its overview in place, and Back returns focus to the row; a posted update grows into the history and the health badge eases to its new tone. Reduced motion: changes are immediate.

Props

Prop	Type	Default	Description
`projects / defaultProjects / onProjectsChange`	`Project[]`	—
`openProject / defaultOpenProject / onOpenProjectChange`	`string \| null`	—
`onPostUpdate`	`(id: string, update: { health: ProjectHealth; text: string }) => Promise<void> \| void`	—	Shows the composer; a rejection takes the update back and returns its text.
`onRename`	`(id: string, name: string) => Promise<void> \| void`	—
`onCreate`	`() => void`	—	Shows New project.
`me`	`string`	—
`loading / error / onRetry`	`boolean / Error \| null / () => void`	—
`workspace`	`string`	`"Northline"`
`nav`	`AppShellNavGroup[]`	—
`className / style / ref`	`string / CSSProperties / Ref<HTMLDivElement>`	—

Built from

app-shell
chip-group
search-field
table
progress
avatar
avatar-group
badge
button
inline-edit
stepper
category-bar
segmented-control
textarea
timeline
alert
empty-state
skeleton

Dependencies

lucide-react

Import

import { Projects } from "@/blocks/projects/projects";

Get it

Projects 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