shadcn.io is not affiliated with official shadcn/ui
Downgrade Options Billing Block for Vue
Back-test cheaper plans on your last six months of usage: three plan rows each with a bar for every month and a six-month total, the lowest price marked each month, and a summary of the months it wins and its dearest month.
Installation
Overview
Show what a cheaper plan would really have cost, with this downgrade section for Vue with Ark UI. A compact header explains that each option is priced on the last six months of records. Inside a hairline frame with a plus mark on each corner, three plan rows are native radios with a hidden input: Pro flat, Lite with a base and a price over its included records, and Pay as you go. Each row holds a six-bar chart with the price for every month under its bar, the lowest price that month drawn solid, and a six-month total that says "Lowest total" where it is. A Data List beneath derives, for the chosen option, the months it is cheapest, its dearest month and the difference over six months against the current plan. The only Shine Button follows the choice, "Switch to Lite from 12 Nov". For usage-based products where the cheapest plan changes with the customer's use.
FAQ
How do I fill it from my billing system?
The constants at the top hold CURRENT, the EFFECTIVE date, the OPTIONS descriptions and the six months of HISTORY with the records used. The pricing rule for each plan lives in costOf: a flat price, a base plus a price for records over the included amount, or a price for each record. Replace it with your own rate card; the bars, totals, wins and dearest month all derive from it in whole cents.
How do I read the bars?
Every bar is scaled against the highest monthly price across all three options, so heights compare between rows. In each month the lowest price is a solid bar and the others are lighter, and the price is also written under each bar with hidden text "(lowest)", so the answer never rests on the shading.
What stays local?
The button writes "Scheduled in this demo" and nothing changes. A past-usage back-test is not a promise: usage next month may differ. In production, schedule the plan change for the renewal date through your billing system and keep this chart as the explanation.
Why is the button inactive on the current plan?
When Pro is chosen there is nothing to switch to, so the button reads "Stay on Pro", is marked unavailable and pressing it says why in the status line. It is not disabled, so it stays in the tab order.