# Project charts

> Delivery charts for product teams — sprint burndown, velocity and a milestone timeline — with honest status, a today marker and per-point detail on hover, focus or arrow keys.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/project-charts
- Install: `npx shadcn@latest add @geturui-pro/project-charts`
- Dependencies: motion, lucide-react

## Variants

### Burndown

Remaining points against the ideal line with a dotted forecast to the end date, a scope change marker, a today divider and a behind or on-track badge.

Install: `npx shadcn@latest add @geturui-pro/project-charts-burndown`

```tsx
import { BurndownChart } from "@/components/examples/project-charts/burndown";

export function Burndown() {
  return (
    <BurndownChart
      sprint="Sprint 18 · Onboarding"
      days={["Mon", "Tue", "Wed", "Thu", "Fri"]}
      committed={40}
      remaining={[40, 34, 29]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| sprint | `string` | — | Sprint name shown under the title. |
| days | `string[]` | — | Working-day labels for the whole sprint. |
| remaining | `number[]` | — | Points left at the end of each day so far; its last index is today. |
| committed | `number` | 64 | Scope on day one; the ideal line starts here. |
| scopeChange | `{ day, points, note }` | — | Optional mid-sprint scope marker. |

### Sprint velocity

Committed scope as dashed ghost bars, completed points filled in, the latest sprint in volt, a rolling average guide and a say/do ratio.

Install: `npx shadcn@latest add @geturui-pro/project-charts-sprint-velocity`

```tsx
import { SprintVelocityChart } from "@/components/examples/project-charts/sprint-velocity";

export function Velocity() {
  return <SprintVelocityChart team="Growth squad · story points" sprints={sprints} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | "Sprint velocity" | Card heading. |
| team | `string` | — | Caption under the title. |
| sprints | `Sprint[]` | — | { name, committed, completed }, oldest first. |

### Milestone timeline

A mini Gantt where bars fill to their progress, milestones sit on a top lane, a today line cuts through and each row opens its dates and risk below.

Install: `npx shadcn@latest add @geturui-pro/project-charts-milestone-timeline`

```tsx
import { MilestoneTimeline } from "@/components/examples/project-charts/milestone-timeline";

export function Roadmap() {
  return <MilestoneTimeline title="Mobile app v3" start="2026-10-05" span={42} today={9} tasks={tasks} milestones={milestones} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | "Checkout revamp" | Project name. |
| start | `string` | "2026-09-07" | ISO date of day zero. |
| span / today | `number` | — | Days shown and today's day offset. |
| tasks | `TimelineTask[]` | — | { id, name, owner, from, to, progress, atRisk? }. |
| milestones | `TimelineMilestone[]` | — | { day, label } diamonds on the top lane. |

## Accessibility

- Charts carry role="img" summaries that state the status in words (for example behind by 7 points), never by colour alone.
- Plots are focusable groups driven by left and right arrows; timeline rows are buttons that move with up and down arrows.
- Warnings pair an icon with text, and reduced motion renders bars and lines without growth or draw-in.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.