For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
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 short billing setup in one narrow card with a horizontal stepper: use the Billing Setup block
- Moving an existing subscription to another tier: use the Plan Change block
- 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
- Replace
INVOICE_CUSTOMERS,INVOICE_PRODUCTSandDEFAULT_INVOICE_FORM_VALUESin data.tsx; the invoice and PO numbers are constants there handleSaveDraftonly shows a toast, andhandleSubmitfakes the send with a 900 ms timer before it setsisSentINVOICE_PREPARERfills the Prepared by line, so swap it for the signed in user- 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
- React DayPicker v9: API reference, docs, through shadcn Calendar
https://web.dev.reui.io/blocks/solutions/billing/solution-billing-5.mdget_block("solution-billing-5")npx shadcn@latest add @reui/solution-billing-5Shadcn Invoice Builder Block
Four-step invoice builder wizard with a live receipt-style review preview. Part of the ReUI Shadcn Solutions Billing blocks collection.
Guided invoice composer: pick a customer, edit line items with per-line tax and discount, then send. Live receipt review with draft and sent states. ReUI Stepper, Alert, Badge; shadcn Card, Table, Combobox, Select. For billing and invoicing pages.
It is composed from Alert, Avatar, Badge, Button, Calendar, Card, Combobox, Field, and more, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Invoice Builder Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Solutions Billing blocks to assemble a full screen instead of a single section.
All Shadcn Solutions Billing Blocks
The rest of this category, each on its own page with 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
- 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
Related Shadcn Solutions Block Categories
- Dev Ops (6) Platform and SRE console pages for scheduled jobs, deployments, audit trails, edge firewall rules, SLOs and data connections.
- AI Ops (9) AI startup control plane pages for model providers, prompts, token cost, routing, and quotas.
- CRM (9) Sales CRM pages for founders, agencies, and startups managing leads and deals.
- Agents (10) AI agent run operation, approval, tool permission, and evaluation pages.
- Analytics (9) Product usage, activation, cohort, event, experiment, and growth reporting pages.
- Bookings (3) Appointment and service-business admin pages for consultants, clinics, salons, and local services.
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
When should I use the Invoice Builder block?
Use it for a searchable customer picker that gates the next step, issue and due date pickers, currency and terms selects and a Save draft button.
The Billing category fits:
- 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
For a short billing setup in one narrow card with a horizontal stepper, use the Billing Setup block. For moving an existing subscription to another tier, use the Plan Change block. For a public page where visitors compare plan tiers and pick one before signing up, use the Pricing blocks. For a signed in customer's own settings page showing their plan, usage and invoices, use the Profile blocks. For a stepped intake flow with no money in it, such as vendor onboarding or team invites, use the Wizard blocks.
What is the Invoice Builder block built with?
Can I restyle the Invoice Builder block?
How should I use Shadcn billing blocks in a real project?
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.