shadcn.io is not affiliated with official shadcn/ui
Cart Mini Billing Block for Vue
The changes queued on a subscription, each with a start select (now or at renewal) and a Remove button, and a foot that works out what is charged today and what the plan costs a month from the renewal.
Installation
Overview
Let customers review what they have queued before it touches the bill, with this pending changes list for Vue with Ark UI. It is not a shop cart: it is a queue of subscription changes. A hairline frame with a plus mark on each corner holds one row per change (two more seats, Priority support removed, a bigger storage add-on), each with what it does to the price, a Native Select that starts it now or at the renewal, and a ghost Button to remove it. Below the list two figures are worked out from the same lines: what is charged today, prorated for the days to the renewal, and what the plan costs a month from the renewal date, next to the price it was. Removing the last line shows an Empty state with a way to put it back, and the list keeps its height so the totals never jump. The Shine Button, the only colored control, applies the queue, and an outline Undo puts back what was removed. It's built from Native Select, Button, Empty, Shine Button and Guides, with a CSS entrance only. For subscription settings, plan management and any product that bills in periods.
FAQ
How do I fill it with my own changes?
Edit CHANGES at the top of the file. Each has an id, a name, a short name for the status line, the monthly change in cents (negative lowers the price) and the start it opens on. CURRENT_MONTHLY is the price before the queue, and DAYS_TO_RENEWAL and PERIOD_DAYS set the proration. Amounts are whole cents, so the totals never carry a rounding error.
What does the start select change?
A change that starts now is charged for the days to the renewal (the monthly change times 17 of 30 days in the example), and a removal that starts now earns a credit for the same days. A change that starts at the renewal charges nothing today. The monthly price from the renewal date is the same either way, so the second figure moves when you remove a line and the first moves when you change a start. Each row says its own effect in words.
What happens when I remove the last line?
The list shows a message that no changes are queued and what the plan costs as it stands, with a button to put the last one back. The list area is always as tall as three rows, so the totals and the buttons below don't move. Undo in the foot restores the most recent removal in the same order, and focus goes to the row that came back.
What stays local, and how do I wire it for real?
Apply only marks the queue as applied and says so; nothing is saved and no plan changes. In your app send the queue to your billing API on the button, with each change's id and start, and compute the amounts on your server too: the numbers here are a preview. The cost shown is before tax.
How does it work with a keyboard and a screen reader?
Every select and Remove button is named for its change ("Start for 2 more seats", "Remove Storage, 100 to 500 GB"). One polite status line in the foot says what changed ("Seats change starts now.", "Removed storage change.", "Applied in this demo.") and focus moves to the next row after a removal, so you never lose your place.