Project Status Tile React component
A compact project card for status boards: health you can change in place, progress with its milestones, who's on it and when it's due.
About the Project Status Tile component
Project Status Tile packs what a project lead asks first into a small card: is it healthy, how far along is it, and what's next. Health can be changed in place, and the colour carries through the progress bar.
Milestones sit along the bar, so it's clear whether a project is ahead of its plan. Point at any one to see its name and date.
When to use it
Use it on portfolio boards, team home pages and weekly status reviews.
Set health honestly and update it often. A board where everything is on track tells no one anything.
Installation
Add the Project Status Tile component to your project with the shadcn CLI. It lands in components/project-status-tile.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/project-status-tileProps
<ProjectStatusTile /> accepts 11 props, all optional. It also accepts the usual <article> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| name | string | "Pricing page refresh" |
| team | string | "Growth" |
| health | "on-track" | "at-risk" | "off-track" | "done" | "on-track" |
| tasksDone | number | 12 |
| tasksTotal | number | 18 |
| milestones | { id: string; label: string; date: string; at: number; done?: boolean }[] | DEFAULT_MILESTONES |
| people Initials of the people on it. | string[] | DEFAULT_PEOPLE |
| due Short date, e.g. "28 Mar". | string | "28 Mar" |
| updated e.g. "2d ago". | string | "2d ago" |
| onHealthChange | (health: ProjectHealth) => void | — |
- theme"dark" | "light"Default: "dark"
- namestringDefault: "Pricing page refresh"
- teamstringDefault: "Growth"
- health"on-track" | "at-risk" | "off-track" | "done"Default: "on-track"
- tasksDonenumberDefault: 12
- tasksTotalnumberDefault: 18
- milestones{ id: string; label: string; date: string; at: number; done?: boolean }[]Default: DEFAULT_MILESTONES
- people
Initials of the people on it.
string[]Default: DEFAULT_PEOPLE - due
Short date, e.g. "28 Mar".
stringDefault: "28 Mar" - updated
e.g. "2d ago".
stringDefault: "2d ago" - onHealthChange(health: ProjectHealth) => void
Project Status Tile FAQ
- Is health saved?
- No. onHealthChange tells you the new value, and your app saves it.
- What does at set on a milestone?
- Its position along the project, from 0 to 100, so the dots line up with the progress.
- Does the menu move the card?
- No. It floats over the card.
- Can I use the keyboard?
- Yes. The pill opens a menu of options, and every milestone can be reached with Tab.
