shadcn.io is not affiliated with official shadcn/ui
Sprint Burndown Task List Block for React Aria
A sprint burndown drawn from remaining points per working day, with a dashed ideal line, a solid actual line and a today point that drops as you tick the sprint's tasks, plus a finish projection.
Installation
Overview
See a sprint's progress move as you work through it, with this burndown to-do list block for React with React Aria. A chart over the ten working days, Mon 12 to Fri 23 Oct, plots remaining points: a dashed ideal line falls from the total to zero, a solid line runs through the days already recorded, and its last point, today, is worked out from the ticked tasks beside it, so ticking a Checkbox drops the point by that task's points and the line follows. The remaining total rolls with a Sliding Number, and a sentence projects the finish at the pace so far ("At 3.3 points a day you finish Fri 23 Oct, on time"). The chart is drawn with SVG and CSS in foreground tones, has a hidden table with every value, and entrances are off under reduced motion. Guides frame the panel. For sprint reviews, status pages and any team that wants to see a trend.
FAQ
Where do the points on the chart come from?
The first value is the sprint's total, the next ones are typed in HISTORY (the remaining points at the end of each past day), and the last is today's, computed from the tasks you have ticked. In your app fill HISTORY from a daily snapshot and keep today's point live.
How is the finish projected?
Points done divided by working days elapsed gives a pace; the remaining points divided by that pace gives the days still needed, counted forward over working days and skipping weekends. The sentence says the date and whether it is on time or how many working days late. With nothing done there is no pace, and it says so.
What stays local, and how do I save for real?
Ticks live in the page and reset on reload, and the history is typed. Write the tick from tick to your tracker, and take the history from its daily records.
Is it accessible?
The plot is one image with a label, and a visually hidden table lists every day's remaining and ideal points as text. The projection sentence, the remaining total and the task list say the same thing in words, and each checkbox is named by its task title.