Preview
Change summary
Review the overview of this change
Current plan
Starter plan
$9.99 / month
New plan
Pro plan
$29.99 / month
Change typeUpgrade
BillingCharge prorated amount now
EffectiveImmediately
Current$9.99 / month
New$29.99 / month
Credit−$6.66
Charge$19.99
Amount due now$13.33
Playground
Data
Result direction
Proration mode
Collection mode
Status
Scheduled change
Install
pnpm dlx shadcn@latest add @paddle/plan-change-previewyarn dlx shadcn@latest add @paddle/plan-change-previewnpx shadcn@latest add @paddle/plan-change-previewProps
preview PlanChangePreviewData
Preview data — typically the response from Paddle's
preview-subscription-update endpoint, passed through with minimal transformation. Pass undefined to render the skeleton loading state. prorationBillingMode "prorated_immediately" | "full_immediately" | "prorated_next_billing_period" | "full_next_billing_period" | "do_not_bill"
Proration mode you'll apply to the change. The component derives copy ("now" vs "next billing date") and the effective date from this value — match it to what you'll pass to
PATCH /subscriptions/{id}. className string
Extra Tailwind classes applied to the root element.
What it does
A compact summary of a subscription plan change. Shows the customer's current plan, their new plan, and the financial impact (charge, credit, or no-op) in a compact card.
It takes into account subscription states that may restrict the customer's billing options, like:
- When a subscription is scheduled to be paused or canceled
- When a subscription is in a trial period
When to use
- You're building an upgrade, downgrade, or plan change page and want to present a clear, scannable preview of the change.
- You want to surface proration behavior ("$13.33 today, $29.99 on Feb 1") in a legible way.
For full invoice-style detail, use the plan change breakdown component instead. Pair the two for optimal UX, presenting the compact preview initially and letting customers expand to see the full breakdown.