shadcn.io is not affiliated with official shadcn/ui
Error Budget Dashboard Block for React
A 30-day error budget as a ledger: five incidents as debits, three planned changes you can tick into a running balance, an availability target toggle of 99.5, 99.9 or 99.95 percent, and a verdict on whether to freeze changes.
Installation
Overview
Know whether you can afford the next release with this error budget ledger for React with Base UI. A hairline frame with a plus mark on each corner holds the 30-day window for an Orders API. A ToggleGroup in the header sets the availability target to 99.5, 99.9 or 99.95 percent, which gives a budget of 216, 43.2 or 21.6 minutes. The ledger opens with that budget, lists five incidents as debits and three planned changes as pending debits, each with a Checkbox, and shows the balance after every line. Ticking a change counts its expected downtime. The foot reads out what remains after the plan and says "Safe to ship", "Freeze changes" or "Budget spent". It's built from ToggleGroup, Checkbox and Guides. For release reviews and reliability reports.
FAQ
How do I use my own incidents and plan?
Edit ENTRIES: a day, a title, a debit in tenths of a minute and planned for a change that has not happened yet. TARGETS holds each target and its budget in tenths of a minute over the window. Every total, the balance after each line and the verdict are worked out from those two lists.
When does it say to freeze changes?
When less than a tenth of the budget remains after the ticked changes, which is FREEZE_SHARE, or when the incidents and the plan together go past the budget. Change the share to match your policy. The verdict is a glyph and a sentence, never only a colour.
What does the target toggle change?
Only the size of the budget. The incidents stay the same, so the same month can be fine at 99.5 percent, tight at 99.9 and over budget at 99.95. The toggle is a single choice that can never be empty, and the arrow keys move between its three options.
What stays local, and how do I wire it for real?
Everything: the incidents and the plan are typed, and ticking a change only recounts the ledger on the page. Feed ENTRIES from your incident tracker and your change calendar, and use the window your SLO is defined over.
How does it look on a phone?
The date folds into the entry line and the debit and balance columns stay, so the running balance is still readable at 320 pixels. The target toggle moves under the sentence.
How does it work with a screen reader?
The ledger is a real table with a caption, column heads and a row head per entry. Each checkbox is named for its change (Count Orders schema migration in the plan), an unticked change reads Not counted in its balance cell, and the verdict is a polite status line present from the start.