shadcn.io is not affiliated with official shadcn/ui
Upgrade Proration Billing Block for React
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 React with Base 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.
How is the dialog wired on each library?
AlertDialogTrigger through render, and the dialog is controlled with open and onOpenChange, so confirming can close it and mark the plan 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.
Related
- Pro
Current Plan Billing
Plan and usageThe account's current plan in app settings: plan, price, renewal date and card, a change-plan action, every quota's usage this period on shared hairlines, and the next invoice.
- Pro
Downgrade Confirmation Billing
Upgrade and downgradeA downgrade that shows what it costs first: the limits that shrink, the folders now over the smaller plan's storage with a checkbox to archive each and a live meter, the day it takes effect, and an alert dialog that asks for a typed word.
- Pro
Plan Comparison Settings Billing
Upgrade and downgradeEvery plan side by side inside app settings: a table with the account's own plan marked and tinted, one change button per plan, a row for when each change takes effect, and plan tabs on a phone.
- Pro
Invoice Preview Pricing
Comparison tablesThree payroll plans as itemised monthly invoices: pick a headcount and each plan's bill adds up line by line, with its total and call to action at the top of its column.
- Pro
Payment Schedule Pricing
Billing switchesTuition paid once or in 3, 6 or 12 installments: four chips pick the schedule and a calendar of twelve monthly cells fills with the dated payments and their amounts, over the total and the call to action.
- Pro
Per-Seat Pricing by Seat Type
Seats and teamsSeat-type pricing with a stepper for each type: Full, Collaborator and Viewer seats at different prices, a stacked bar of the seat mix, a live monthly total and, on a phone, a sticky total bar.