shadcn.io is not affiliated with official shadcn/ui
Cost Optimization Changelog Block for Svelte
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 Svelte with Ark 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.
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.