shadcn.io is not affiliated with official shadcn/ui
Cost Optimization Changelog Block for React
Nine 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.
Installation
Overview
A cost-savings accordion for React with Base UI, written for Thriftwell, a fictional cloud-cost tool. A start-aligned header carries a title worked out from the data (the dollars saved a month, in how many changes). One accordion runs from rail to rail with a row for each category (compute, storage, bandwidth, database): the trigger shows the category's name, a share bar of the whole and the dollars saved a month with its share in words, and the biggest category is open on load. A panel lists that category's wins, each with what it saves and the release that shipped it. It's built from Accordion, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For cost reports, release notes that count savings and finance reviews. The figures are example data.
FAQ
How do I change the savings?
Edit CATEGORIES at the top of the file. A category has an icon, a label and its wins; a win has the dollars saved a month, a sentence and the release version that shipped it. The totals, the shares, the title and the open row are worked out from the wins: the biggest category opens first, and the shares are whole percentages by largest remainder, so they always add to 100.
How does the accordion behave?
One row is open at a time and it starts with the biggest category. Each trigger is a button inside a heading, so a screen reader can jump between categories. A closed panel's text stays in the page's HTML on the Ark UI and React Aria builds only. Tab moves between the triggers.
What does the share bar show?
The category's share of all the savings. It is a drawing: the same share is written beside it as a percentage, and the dollars are exact, not rounded, so the text carries everything the bar does.
Where do the releases come from?
Each win names the release that shipped the change, as a badge with the version in mono. They are plain text here; link them to your release notes if you like.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the share bar drops under the category name and the amounts wrap under it. Dollar amounts stay left to right. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.
Related
- 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
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
Accordion Changelog
Lists and timelinesA release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.
- Pro
API Usage Metrics Changelog
APIs and integrationsSix weeks of requests as stacked columns by API version, the legend and title reading the latest week's shares from the data, a Requests or Share toggle, and a three-cell band of requests, error rate and p95 latency with their changes.
- Pro
Expandable Release Entries
Lists and timelinesFour release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.
- Pro
Donut Pill Legend Stats
Parts of a wholeA traffic-source donut over a row of pill toggles: switch a source off and its arc leaves the ring, the others grow to fill it, and the shares and the total in the middle are worked out again.