shadcn.io is not affiliated with official shadcn/ui
Infrastructure Cost Changelog Block for React
A cost table per service with a signed delta against the previous release, a share bar and a total row, a budget progress bar with a tick, and a Monthly or Yearly toggle that multiplies the figures.
Installation
Overview
A cloud-cost changelog for React with Base UI, written for Cloudledger, a fictional cloud spend tool. A start-aligned header carries a Monthly and Yearly toggle at its end. Under it an inset frame with a + on each corner opens with a line that names the two releases and the period, then one table in a focusable, scrolling region: a row per service with its cost, its change against the previous release (an arrow, a sign and a dollar figure, with the percent beside it from the small breakpoint) and its share of the total as a bar and a number, then a total row. Under the table sits the budget: a bar that shows how much is spent, with a tick where the previous release stood, and a sentence in words ("$12,000 budget, 87% used"). Switching the toggle multiplies every dollar figure by twelve and the digits roll to their new values; the columns have a fixed width, so nothing moves. On a phone the share column is hidden. It's built from Guides, Toggle Group, Progress and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For cost reports, FinOps updates and release notes about infrastructure. The figures are example data.
FAQ
How do I change the services and the budget?
Edit SERVICES, BUDGET, RELEASE and PREVIOUS at the top of the file. A service has an id, a name and its monthly dollars in this release (now) and the one before (previous). The total, the deltas, the shares, the percent used and the tick all come from those numbers.
Why do the shares always add up to 100?
Each share is worked out in whole percents and the leftover points go to the services with the largest remainders, so the column always sums to 100 even where plain rounding would give 99 or 101.
How are increases and decreases told apart without colour?
By an arrow (up for more spend, down for less), a plus or a true minus sign and the figure, with the percent beside it. Screen readers hear "up $280, +7.3%" or "down $50, −1.9%". There is no red and green.
What does the Monthly and Yearly toggle do?
It multiplies every dollar figure (costs, deltas, the budget) by twelve; the digits roll, the percents and shares stay the same, and the line above the table says which period you are looking at. The columns have fixed widths, so nothing in the table moves.
What is the tick on the budget bar?
It marks where the previous release stood against the same budget (83%), so you can see at a glance how far this release moved it. The sentence under the bar says so in words, and the bar's own label reads the percent used.
How does it fit on a phone and in a right-to-left layout?
On a phone the share column is hidden and the delta keeps its arrow and dollar figure; the table scrolls sideways in its region if it still does not fit. In a right-to-left layout the table and the toggle mirror while figures and the release names keep their reading order.
Related
- Pro
Cost Optimization Changelog
Metrics and chartsNine cost savings grouped by category in one accordion: each row shows the category's dollars saved a month and a share bar, and opens to the wins and the release that shipped each.
- Pro
Capacity Planning Changelog
Incidents and uptimeFour resource cells on shared hairlines, each with a ring for how full it is, what it was a release ago and how long until it is full at this rate, with a toggle that picks the release.
- Pro
Tabbed Feed Infrastructure Changes
Data and configAn infrastructure change feed with tabs (All, Compute, Storage, Network): each row a change tag with an icon and a word, the service in mono, a struck-through from value, an arrow and the new value, and the day, in an inset frame.
- Pro
Error Budget Burn-Down Changelog
Incidents and uptimeA 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.
- Pro
Bundle Size Changelog
Metrics and chartsFive releases as stacked horizontal bars split into four chunks, told apart by weight and pattern, with a budget tick, each release's total and change, and a toggle that rolls the sizes between gzip, brotli and raw.
- Pro
Paired Bars Queue Metrics
Metrics and chartsFive message queues as rows of paired bars, the release before as an outline and the current release solid, with a three-way switch between throughput, lag and dead letters, and a header that counts the lagging queues.