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

# Plan change breakdown

Full invoice-style financial breakdown for a plan change, including line items, proration, discounts, tax, and totals.

---

## What it does

A full breakdown of a subscription plan change. Shows line items, proration, discounts, tax, and totals, split across:

- Charged today: what the customer is going to be charged immediately
- Next invoice: what the customer is going to be charged at the next billing date
- Ongoing billing: what the customer is going to be charged on a recurring basis

Includes a prominent human-readable summary of the change, so customers can quickly understand the financial impact.

## When to use

- You're building an upgrade, downgrade, or plan change page and want to present the full financial breakdown to the customer before they confirm the change.
- You're building an admin or operations view that needs the full proration detail visible.

For a more compact confirmation card, use the [plan change preview](https://developer.paddle.com/sdks/components/plan-change-preview.md) component. 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-breakdown.json`](https://developer.paddle.com/r/plan-change-breakdown.json)

## Install

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

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

## Props

- **breakdown** (PlanChangeBreakdownData): Full breakdown data — typically derived from Paddle's preview-subscription-update response. Includes immediate transaction, next transaction, and recurring totals. Pass undefined to render the skeleton loading state.
- **collectionMode** ("automatic" | "manual"): From subscription.collection_mode. Affects section titles — "Charged Today" for automatic, "Invoice Created" for manual.
- **className** (string): Extra Tailwind classes applied to the root element.