shadcn.io is not affiliated with official shadcn/ui
Add-On Usage Breakdown Billing Block for Vue
Paid add-ons (storage, support seats, API boost) as bars of used over paid, with a size select per row that re-prices it and a button that schedules the right-sized plan for the renewal date.
Installation
Overview
Show customers how much of what they pay for they actually use, inside your app, with this add-on usage breakdown for Vue with Ark UI. A hairline frame with a plus mark on each corner opens with three figures: what the add-ons cost a month, how much of that paid capacity is in use, and the same after your changes. Below, a row per add-on (extra storage, support seats and an API boost) draws a Progress bar of used over paid with the count and percentage beside it, and a Native Select of sizes: choosing one re-prices the row, re-measures the bar and says what it would cost from the renewal date. Sizes smaller than your use are disabled. A Shine Button counts the changes ("Apply 2 changes") and schedules them, the only colored control. The rows are ruled by Guides. For storage, seats and metered boosts sold on top of a plan.
FAQ
How do I fill it with my customer's add-ons?
Edit ADD_ONS: each has a name, a description, what is used (and how it reads as usedText), the current size billed today and a list of sizes with a label, a size in the add-on's unit and a monthly cost. RENEWAL is the date new sizes start, written in UTC. The summary, the bars and the totals are derived, and the utilisation is weighted by what each add-on costs, so a small boost can't hide an expensive idle one.
Why are some sizes disabled?
A size smaller than what is in use would put the customer over their limit the day it starts, so it is greyed out and the option says "below your use". In the example 50 GB is disabled because 62 GB is stored. Remove that rule if your product lets people go over and bills the overage.
What does Apply do?
It schedules the chosen sizes for the renewal date on this page and says so; it changes nothing on an account and the rows keep showing today's bill until then. The label counts the changes and reads "Apply changes", unavailable, when there are none. In your app, send the sizes to your billing API and read the effective date from the response.
How is it read by a screen reader?
Each add-on is an h3 in a list with its count and percentage as text, so the bars are hidden from assistive technology. Each select is labelled "Size" within its row and its options say their price. A polite status line reads the scheduling result, and the renewal date is written in UTC so it reads the same everywhere.