shadcn.io is not affiliated with official shadcn/ui
Revenue Analytics Mini Billing Block for Vue
Unit cost per what you choose: the month's cloud spend divided by active users, 1,000 requests or GB stored, one large figure over a six-month line with a change chip against the three-month average, and a real CSV of the series.
Installation
Overview
Turn a cloud bill into a number a team can act on, with this unit cost card for Vue with Ark UI. A compact header holds a Toggle Group, Per, for the driver: users, requests or storage. Inside a hairline frame with a plus mark on each corner, one large figure, rolling with Sliding Number, gives the month's spend divided by the driver, with the unit in words and an outline Badge that says whether it is up, down or level against the average of the three months before, as a glyph and words. Under it a hand-built line draws six months of the same cost with a dashed three-month average. A side cell shows the working: the spend, what it was divided by and the average. The only Shine Button sits inside a Download Trigger and saves a real CSV of the typed series. It's built from Toggle Group, Sliding Number, Badge, Download Trigger, Shine Button and Guides, with an SVG line and a CSS entrance only. For spend dashboards and cost pages. The figures are example data.
FAQ
How do I fill it with my numbers?
SERIES holds six months, oldest first, each with its spend in cents and the three divisors: users, requests in thousands and gb. DRIVERS lists the units, with their words and decimals. The figure, the line, the average, the chip and the CSV all derive from those two constants; the latest month is the last entry. Fetch your own series and pass it in the same shape.
How is the change chip worked out?
The latest month's unit cost against the average of the three months before it, as a whole percent, shown with an arrow glyph and words ("down 3% vs the 3-month average"), and "level" when it rounds to zero. The direction is never only a colour or an arrow, and the dashed line on the figure is that average.
Is the download real?
Yes. The Download Trigger builds a CSV in the browser from the typed series, with the month, the spend, the three divisors and the unit cost for the driver you have chosen, and saves it as tideledger-unit-cost-2026-10.csv. Nothing is uploaded or measured; the numbers are example data, and the card says so in its status line.
Is the line accessible?
The drawing is hidden from assistive technology and the same facts are in text: the large figure with its unit, the chip, the working in the side cell and a table of the unit cost for each month available to screen readers inside the figure. The sliding digits keep the real number as hidden text, so it is read once.