For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- A signed in customer's own settings page showing their plan, usage and invoices: use the Profile blocks
- A stepped intake flow with no money in it, such as vendor onboarding or team invites: use the Wizard blocks
Agent notes
- Each block sets a
min-h-svhwrapper withbg-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
useStateor fire a sonnertoast; post to your billing backend from those handlers
Third-party API docs
- Sonner v2: API reference, docs, used by 8 of 9 blocks
- TanStack Table v9: API reference, docs, used by 4 of 9 blocks
- React DayPicker v9: API reference, docs, used by 2 of 9 blocks
- Headless Tree v1: API reference, docs, used by 1 of 9 blocks
- date-fns v4: docs, used by 1 of 9 blocks
https://web.dev.reui.io/blocks/solutions/billing.mdsearch({ query: "billing", type: "block", category: "billing" })Shadcn Billing Blocks for SaaS Subscription and Invoicing UI
A free component library gives you a Table and a Badge. It does not give you the screen where a billing operator decides which failed charge to retry first. That gap is what this category closes: each block is a finished workspace with its states, filters, empty cases, and row actions already wired.
The set covers the whole money surface of a subscription product. Accounts receivable and past due recovery, a plan and pricing catalog, a subscription lifecycle grid spanning active, trialing, past due, and canceled, a single customer account detail with tabbed invoice history, and a coupon manager whose rows expand into a redemption rule editor.
Everything is plain React with Tailwind classes and shadcn primitives, delivered as source into your repo through the shadcn CLI. There is no billing runtime to adopt and no payment provider assumed, so Stripe, Paddle, Chargebee, or your own ledger can all sit behind the same UI.
All Billing Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Invoice Ledger Billing operator workspace with invoice ledger and past due recovery
- Plan Catalog Plan and pricing catalog editor with tiered plan tiles and status toggles
- Subscription Lifecycle Subscription Management Workspace with Quick-Action Cards and Lifecycle Grid
- Billing Account Detail Customer Billing Account Detail with Tabbed Invoices, Subscription, and Activity Rail
- Invoice Builder Four-step invoice builder wizard with a live receipt-style review preview
- Dunning Queue Expandable Dunning Queue for SaaS Failed Payment Recovery
- Usage Event Ledger Metered usage event ledger with tree meter scope selection
- Plan Change Subscription Plan Change Wizard with Live Proration Preview
- Coupon Manager Coupon and promotion manager with inline redemption rule editor
Revenue Recovery Screens Most Component Libraries Skip
Failed payments are the highest-value screen in a billing product and the one almost nobody designs.
The dunning queue is sortable and filterable, and every row expands inline into that charge's retry timeline, so an operator can read the attempt history before deciding to retry, dun again, or write off. It is built on ReUI DataGrid, Frame, and Filters with shadcn Button and Separator.
Beside it, the receivables workspace pairs a statement summary card and a past due Alert with a filterable invoice ledger, so the billing position and the collection work live on one page instead of two. The subscription lifecycle grid adds quick-action cards with budget progress above a searchable grid with row actions.
Plan Changes, Proration, and Metered Usage
Pricing changes are where billing UIs usually fall apart, because the number the customer sees has to be right before they click.
The plan change wizard moves a subscription to a new tier through a Stepper while a proration rail recomputes credit, charge, and due today every time the plan or the timing changes. The invoice builder follows the same shape in four steps: pick a customer, edit line items with per-line tax and discount, then review a receipt-style preview in draft or sent state before sending.
For consumption pricing, the metered usage ledger audits events by meter and period with a Tree sidebar driving scope, a Calendar date picker, Breadcrumb context, and export. That is the screen you need when a customer asks why an invoice came out to that number.
Fits Your Stack and Your Theme
- Eight styles, two bases Every block is generated for all 8 ReUI styles across both the Base UI and Radix primitive bases, so billing pages match the rest of the product instead of looking bolted on.
- Source, not a dependency The shadcn CLI copies React and Tailwind files into your components directory. There is no billing wrapper package to keep upgrading.
- Provider agnostic Grids, wizards, and ledgers read typed local data. Swap in Stripe subscriptions, Paddle transactions, or your own invoice rows without touching the components.
- Operator-grade states Draft and sent invoices, active, trialing, past due, and canceled subscriptions, active, draft, and archived plans. The states are already rendered, not left as a TODO.
Related Shadcn Solutions Block Categories
- Analytics Blocks (9 blocks) Activation funnels, cohort retention, and adoption reports for the usage data that drives metered invoices.
- Users Blocks (7 blocks) Members, roles, and invitations, which is the seat count your per-seat plan is billing against.
- CRM Blocks (9 blocks) Pipeline, contacts, and deal detail for the sales motion that happens before the first invoice.
- Inventory Blocks (11 blocks) Stock, reorder, and supplier screens for products that invoice against physical goods.
- Bookings Blocks (3 blocks) Appointment admin for consultants, clinics, and service businesses that bill per session.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
What is actually included in each billing block?
How do I install a billing block?
Can I restyle the billing pages to match my product?
Do these work with Stripe, Paddle, or a custom biller?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.