Does this actually charge the user or change their plan?

No. The confirm button simulates a delay and then shows a success screen. Wire handleConfirm's follow-up to your real upgrade API call and only show success once that call resolves.

Where does the prorated amount come from?

You compute and pass it in as proratedAmount. A common source is fetching Stripe's upcoming invoice preview for the new price before opening this dialog.

Can I reuse this for downgrades?

The layout works for a downgrade, but the copy ("Upgrade to", "Confirm upgrade") is written for upgrades. Swap those strings via props, or fork the component's static text, for a downgrade-specific tone.

What happens if I don't pass proratedAmount?

The prorated row is skipped entirely, so the dialog just shows the plan comparison and benefits with no charge preview.

Does closing the dialog mid-upgrade cancel the request?

The cancel and close controls are disabled during the loading step specifically so the dialog can't be closed while a request is in flight.

Is this a real modal or just styled to look like one?

It's a real dialog, built on the same Dialog primitives as the rest of the site's overlays, not a plain section styled to resemble a modal.

Billing Plan Upgrade Modal

A dialog that confirms a plan upgrade before it happens, showing the current and new plan side by side, the key benefits being unlocked, and an optional prorated charge for the rest of the billing cycle. Confirming shows a brief loading state on the button, then switches the dialog to a success screen. Built as the last step in an upgrade funnel so someone always sees exactly what they're about to be charged before committing.

By Staaarter Team

Billing

Updated June 22, 2026

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, dialog dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-plan-upgrade-modal.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing95.tsx instead.

Usage

The file also exports billing95Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing95, billing95Demo } from "@/components/blocks/billing/billing95";

export default function Page() {
  return <Billing95 {...billing95Demo} />;
}

Props

Prop	Type	Default	Description
triggerLabel	string	"Upgrade plan"	Label on the button that opens the dialog.
currentPlanName	string	none	Name of the plan the user is currently on.
currentPrice	string	none	Formatted current plan price, shown without the suffix.
newPlanName	string	none	Name of the plan being upgraded to.
newPrice	string	none	Formatted new plan price, shown without the suffix.
priceSuffix	string	"/mo"	Suffix appended to both prices, e.g. "/mo".
proratedAmount	string	none	Optional formatted amount charged immediately; omit to hide the prorated row entirely.
proratedNote	string	none	Optional one-line explanation shown under the prorated amount.
benefits	string[]	none	Key benefits listed with check marks under "What you'll get".
confirmLabel	string	"Confirm upgrade"	Label on the confirm button before the loading state.
cancelLabel	string	"Cancel"	Label on the button that closes the dialog without upgrading.
confirmedTitle	string	"You're upgraded"	Heading shown on the success screen.
confirmedMessage	string	none	Success screen body text; falls back to a default message naming newPlanName if omitted.
className	string	none	Extra classes for the trigger button.

Behavior notes

The dialog has three internal steps: review, loading, and success. Clicking confirm moves from review to loading immediately, then to success after a simulated 900ms delay standing in for a real upgrade request.
Both the confirm and cancel buttons disable during the loading step so the dialog can't be dismissed or double-submitted mid-request.
Closing the dialog, whether by canceling, the close button, or clicking outside, resets the step back to review after the close animation finishes, so reopening the dialog always starts from a clean review screen.
The prorated amount row and its note are each independently optional; omit proratedAmount entirely for upgrades that don't charge anything until the next renewal.
The trigger is a real Base UI dialog trigger rendering a Button, so it's keyboard-operable and the dialog is announced correctly to screen readers.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.