# Plan Change block

> Subscription Plan Change Wizard with Live Proration Preview

Stepped wizard to move a subscription to a new tier with a proration rail recomputing credit, charge, and due-today as plan and timing change. ReUI Stepper, Badge, Alert; shadcn Card, Button, RadioGroup, Item, Avatar. For plan upgrades, downgrades.

- Type: Pro block
- Category: [Billing](https://reui.io/blocks/solutions/billing.md)
- Page: https://reui.io/blocks/solutions/billing/solution-billing-8
- MCP: `get_block("solution-billing-8")`
- Built with: Alert, Avatar, Badge, Button, Card, Field, Item, Radio Group, Stepper
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Per seat tier radio cards and an apply now or at renewal choice, with an upgrade or downgrade badge and credit carried to the next invoice

## Agent notes

- Replace `SUBSCRIPTION`, `PLAN_OPTIONS` and `TIMING_OPTIONS` in data.ts; the account, 20 seats and the renewal date are constants
- `getProration` multiplies price by seats and days remaining over `cycleDays`, and returns zeros at renewal; swap in your billing quote
- `handlePrimaryAction` only sets `confirmed` and shows the Plan change scheduled alert, with no toast or request behind Confirm change

## When not to use

- Buying prepaid credits through a stepped purchase flow with auto top-up: use [AI Credit Checkout](https://reui.io/blocks/ecommerce/checkout/checkout-3.md) (`get_block("checkout-3")`)
- Editing the plan catalog itself rather than moving one subscription: use [Plan Catalog](https://reui.io/blocks/solutions/billing/solution-billing-2.md) (`get_block("solution-billing-2")`)

## Install

```bash
npx shadcn@latest add @reui/solution-billing-8
```

## About Billing blocks

### When to use

- A billing back office: the invoice ledger, subscriptions, dunning, metered usage, plans and coupon rules
- One customer's account seen by staff, a plan change with proration, or an invoice built line by line
- A tenant's own billing settings, where plan, card and invoice changes hand off to Stripe hosted pages

### When not to use

- A public page where visitors compare plan tiers and pick one before signing up: use the [Pricing blocks](https://reui.io/blocks/marketing/pricing.md)
- A user's account page where billing is one tab beside personal details and security: use the [Profile blocks](https://reui.io/blocks/application/profile.md)
- A stepped intake flow with no money in it, such as vendor onboarding or team invites: use the [Wizard blocks](https://reui.io/blocks/application/wizard.md)

### Agent notes

- Each block sets a `min-h-svh` wrapper with `bg-background`, padding and a max width in page.tsx or its root component; drop it inside an app shell
- No block calls an API: sends, retries, saves and exports update `useState` or fire a sonner `toast`; post to your billing backend from those handlers

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.