# Shadcn Billing blocks

> Subscription, invoice, metering, plan, upgrade, and failed payment pages.

- Type: Pro blocks (Solutions)
- Page: https://web.dev.reui.io/blocks/solutions/billing
- Blocks: 9
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A back office for billing operators: the invoice ledger, subscriptions, a dunning queue and metered usage
- Plan and discount admin: editing the plan catalog and coupon rules, or moving a subscription to a new tier
- One customer's billing account seen by staff, or an invoice built line by line and then sent

## When not to use

- A public page where visitors compare plan tiers and pick one before signing up: use the [Pricing blocks](https://web.dev.reui.io/blocks/marketing/pricing.md)
- A signed in customer's own settings page showing their plan, usage and invoices: use the [Profile blocks](https://web.dev.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://web.dev.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

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 8 of 9 blocks
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start), used by 4 of 9 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 2 of 9 blocks
- Headless Tree v1: [API reference](https://headless-tree.lukasbach.com/api/core/), [docs](https://headless-tree.lukasbach.com/getstarted/), used by 1 of 9 blocks
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 9 blocks

## Blocks

- [Invoice Ledger](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-1.md): Billing operator workspace with invoice ledger and past due recovery. Best for a statement card and a past due alert whose button filters the invoice ledger, plus bulk collector reminders and a void confirm.
- [Plan Catalog](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-2.md): Plan and pricing catalog editor with tiered plan tiles and status toggles. Best for plan tiles with active and public switches, entitlement and add-on lists, and a dialog for monthly and annual price and per seat billing.
- [Subscription Lifecycle](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-3.md): Subscription Management Workspace with Quick-Action Cards and Lifecycle Grid. Best for quick action cards with budget bars over lifecycle tabs, a star health rating, a readiness ring and a column settings popover.
- [Billing Account Detail](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-4.md): Customer Billing Account Detail with Tabbed Invoices, Subscription, and Activity Rail. Best for one past due account with a switchable default payment method, invoice row menus to view, download or remind, and a sticky activity rail.
- [Invoice Builder](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-5.md): Four-step invoice builder wizard with a live receipt-style review preview. Best for a searchable customer picker that gates the next step, issue and due date pickers, currency and terms selects and a Save draft button.
- [Dunning Queue](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-6.md): Expandable Dunning Queue for SaaS Failed Payment Recovery. Best for failed charges with the attempt history under each row, a Retry now that flips status to Retrying and a templated contact dialog.
- [Usage Event Ledger](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-7.md): Metered usage event ledger with tree meter scope selection. Best for events flagged within or over allowance, an empty state for meters with no events, an event inspector and CSV, Excel or PDF export.
- [Plan Change](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-8.md): Subscription Plan Change Wizard with Live Proration Preview. 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.
- [Coupon Manager](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-9.md): Coupon and promotion manager with inline redemption rule editor. Best for promo codes with copy to clipboard, redemptions shown against a limit, percent or fixed tabs and a create dialog that rejects duplicates.

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