shadcn.io is not affiliated with official shadcn/ui
Upgrade Proration Billing Block for Solid
Changing plan inside app settings with the bill worked out first: pick a higher plan and the credit for unused days, the new plan's cost for those days, what's due today and the next invoice roll live, then an alert dialog confirms the charge.
Installation
Overview
Let customers upgrade mid-period without surprises, with this prorated plan change for Solid with Ark UI. A hairline frame with a plus mark on each corner holds two columns. The first names the current plan in an outline Badge and offers the higher plans as choice cards in a Radio Group. The second is a Data List that works out the bill for the days left in the period: the credit for unused time on the old plan, the new plan for the same days, what's due today, and the next full invoice. Its amounts roll with Sliding Number when you pick another plan. A bottom band holds the card line and a Shine Button, the only colored control; it opens an Alert Dialog that repeats the charge before it's made. On a phone that band sticks to the bottom with the amount due beside the button. For SaaS billing settings, seat-based products and admin consoles.
FAQ
How do I fill it from my billing provider?
Two constants at the top of the file hold everything. ACCOUNT has the card's last four digits, the current plan's name and seat price, the number of seats, the billing period's periodStart and periodEnd as ISO dates, and today, the day the change happens. PLANS lists the plans on offer with an id, name, per-seat seat price and a description. Replace them with your subscription and price list, set today from the clock on the server, and pass them in as props if the page fetches them.
How is the proration worked out?
In whole cents. The credit is the old plan's monthly cost for all seats times the days left over the days in the period, rounded to the cent. The new plan's charge is worked out the same way, and what's due today is the charge minus the credit. The next invoice is a full month of the new plan on every seat, on the day the period ends. It's a preview built from your own prices: your billing provider computes the real charge, so for production show the amounts from its upcoming-invoice preview and keep this layout.
What does the confirmation do, and where does focus go?
Pressing the main button opens an alert dialog that states the amount due and the card. Escape or "Not now" closes it and focus returns to the button. The confirm action calls one confirm function: replace its body with your upgrade request. After it runs the dialog closes, the button keeps focus and reads "Plan changed" while it's dimmed and aria-disabled, so it no longer opens anything, and a polite live region announces the upgrade and the amount charged. The choice cards are disabled once the plan has changed.
What does a screen reader hear?
The section starts with an h2, and the choice cards are a radio group named by the "Upgrade to" heading, each card with its price and description; arrow keys move between plans and select them. The proration is a description list, so every amount is read with its label, and the credit is read as "Minus" before its number. Sliding Number keeps the real amount as hidden text and hides the rolling digits from assistive technology, so each amount is read once, as a whole.
How does it look on a phone?
The two columns stack, the plan cards first and the proration under them. The bottom band is sticky: it stays at the bottom of the screen with "Due today" and its amount on the left and the upgrade button on the right, so the main action never scrolls away. From the medium breakpoint it's an ordinary band at the end of the panel with the card line instead of the amount.