shadcn.io is not affiliated with official shadcn/ui
Sprint Timeline Calendar Block for Radix UI
A window with three sprints in a list and the chosen one's ten working days, burndown and stories, where ticking a story marks it done today and moves the points to go and the pace.
Installation
Overview
Track a sprint against its plan with this sprint timeline for React with Radix UI. A framed window with a plus mark on each corner has a top bar and, under it, a list of three sprints (13 finished, 14 current from 12 to 23 October 2026 and 15 planned) beside the chosen sprint's detail. The detail shows three figures (points to go, the ideal for today and the pace), a burndown with the ideal line dashed and the actual line solid up to 14 October, ten working-day cells with today ringed and the points burned each day, and the stories with their points and their owner's initials. Ticking an open story in the current sprint with a Checkbox marks it done on 14 October, and the points to go, the last point of the actual line, the day's burn and "Behind by 2 points" or "Ahead by 1 point" are worked out again. A finished sprint reads as history and a planned one says when it starts. Only the detail scrolls. Below 1024 px the list and the detail are one pane each with a Back button. It's built from Checkbox, Avatar, Badge, Label, Button and Guides, with a CSS entrance only. For engineering teams, delivery dashboards and any view that tracks work against a calendar.
FAQ
How do I fill it with my sprints?
Edit SPRINTS (an id, the Monday it starts, a name and its phase of done, current or planned) and STORIES (a sprint id, title, points, owner's initials and the ISO day it was finished, empty while open). The ten working days, the totals, the burndown and the pace are all worked out from those two arrays and AS_OF.
How are Ahead and Behind worked out?
The ideal line falls in equal steps from the sprint's total to zero over ten days. On 14 October, the third day, the ideal is three tenths of the way down. If the points still open are fewer than the ideal the sprint is ahead by the difference, if more it is behind, and if equal it is on pace. Ticking a story changes the open points and so the sentence.
Why is today always 14 October?
Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and the ringed day, the extent of the actual line and the pace all come from it, so the block looks the same on any day and in a screenshot. Stories finished before today are typed and have no checkbox.
How do I use it with the keyboard?
The sprints are buttons in a list, with the chosen one marked as current. Each open story is a checkbox named with its title and described by its state, and the detail is a scroll region you can reach with Tab. Choosing a sprint on a phone moves focus to its heading, and Back returns it to the sprint you came from.