shadcn.io is not affiliated with official shadcn/ui
Error Budget Burn-Down Changelog Block for Radix UI
A thirty-day error-budget burn-down with release flags you can pick, an incident ring, a table of each release's consumed share and burn rate, and a short list of figures.
Installation
Overview
An error-budget burn-down for React with Radix UI, written for Slowburn, a fictional SLO tracker. A start-aligned header carries a title worked out from the data (the release that spent the most of the budget, and in how many days). Under it a framed chart draws the budget remaining over thirty days, falling from 100% to 38%, against a dashed line of an even burn, with a ring on the one day that took 22% and three release flags you can pick. The picked release's days are shaded and drawn heavier; below the chart a table gives every release the share of the budget it consumed and its burn rate, and a short list of figures sits beside it. It's built from Guides and native table and chart markup, with CSS transitions and your theme's tokens for every colour. For SLO dashboards, reliability reports and release reviews. The figures are example data.
FAQ
How do I change the days, the releases and the incident?
Edit USED at the top of the file: the percent of the budget spent on each of the thirty days, in order. Everything else is worked out from it: the line, the remaining budget, each release's consumed share and burn rate, the worst day and the title. RELEASES lists the releases newest first, each with the day it shipped (counted from day 1) and a short form for phones; a release's days run until the next one ships. The start date is the one constant in isoOf, so the dates are fixed and never come from today.
What does the burn rate mean?
1.0x spends the budget exactly as fast as the thirty days allow, so 1.2x would run out early and 0.4x leaves room. It is the consumed share divided by the days the release was live, over an even share of one day. The table says in words whether a release burned faster or slower than even, so the meaning never rests on a number alone.
What do the release flags do?
Each flag is a button with a pressed state. Picking one shades the days that release was live, draws that part of the line heavier and marks its row in the table with aria-current. Nothing moves, and the choice stays local to the block. The flags come after each other in the reading order newest first, as in the table, even though they sit along the time axis.
How does a screen reader get the chart?
The drawing is hidden from assistive technology and a caption gives the same facts in words: the budget falls from 100% to 38%, the incident day and how much it spent, and which release is selected. The table and the list of figures are real markup with headers.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the flags shorten to their versions (v4.2 for v4.2.0), the chart keeps its shape in a narrower box, and the table and figures stack. The chart box is always left to right, since time runs one way on its axis. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.