Sprint Burndown
A sprint burndown you can update: pick a day, log points closed or scope added, and see the projected finish.
sprint-burndown.tsxsprint-burndown.css
Checking access…
Overview
The dashed line is the ideal pace; the solid line is what remains. Selecting a day shows its numbers and lets you log progress for it.
A trend fitted to the logged days projects the finish date and says how far ahead or behind the sprint is running.
When to use
- Team dashboards, standup views, project cards.
When not to use
- Kanban teams without fixed sprints: use a cumulative flow chart.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/sprint-burndown.json$
npx shadcn@latest add https://sundaeui.dev/r/sprint-burndown.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/sprint-burndown.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/sprint-burndown.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy sprint-burndown.tsx and sprint-burndown.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { SprintBurndown } from '@/components/sundae/sprint-burndown'
<SprintBurndown />Props
| Prop | Type | Default |
|---|---|---|
daysWorking days in the sprint. | number | 10 |
scopeCommitted points. | number | 40 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Days are buttons named with remaining points; the status line is a live region.
- The chart is described by the status text.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-brn2; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Sprint Burndown free?
- Sprint Burndown is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Sprint Burndown?
- Run npx shadcn@latest add https://sundaeui.dev/r/sprint-burndown.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Sprint Burndown support keyboard and screen readers?
- Days are buttons named with remaining points; the status line is a live region. The chart is described by the status text.
- Does Sprint Burndown respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined - Pro
Donut Breakdown
Data · Refined - Pro
Range Line Chart
Data · Refined Weather Forecast
Data · Refined