> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Plan change preview

Compact confirmation summary for a plan change. Includes the old and new plan, whether the customer is charged or credited, and when the change takes effect.

---

## 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](https://developer.paddle.com/sdks/components/plan-change-breakdown.md) component instead. Pair the two for optimal UX, presenting the compact preview initially and letting customers expand to see the full breakdown.

**Registry:** [`https://developer.paddle.com/r/plan-change-preview.json`](https://developer.paddle.com/r/plan-change-preview.json)

## Install

```bash
npx shadcn@latest add @paddle/plan-change-preview
```

Also runnable with `pnpm dlx shadcn@latest add @paddle/plan-change-preview` or `yarn dlx shadcn@latest add @paddle/plan-change-preview`.

## Props

- **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.