# Invoice Builder block

> Four-step invoice builder wizard with a live receipt-style review preview

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.

- Type: Pro block
- Category: [Billing](https://web.dev.reui.io/blocks/solutions/billing.md)
- Page: https://web.dev.reui.io/blocks/solutions/billing/solution-billing-5
- MCP: `get_block("solution-billing-5")`
- Built with: Alert, Avatar, Badge, Button, Calendar, Card, Combobox, Field, Input, Input Group, Popover, Select, Separator, Spinner, Stepper, Table
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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

## Agent notes

- Replace `INVOICE_CUSTOMERS`, `INVOICE_PRODUCTS` and `DEFAULT_INVOICE_FORM_VALUES` in data.tsx; the invoice and PO numbers are constants there
- `handleSaveDraft` only shows a toast, and `handleSubmit` fakes the send with a 900 ms timer before it sets `isSent`
- `INVOICE_PREPARER` fills the Prepared by line, so swap it for the signed in user

## When not to use

- A short billing setup in one narrow card with a horizontal stepper: use [Billing Setup](https://web.dev.reui.io/blocks/application/wizard/wizard-1.md) (`get_block("wizard-1")`)
- Moving an existing subscription to another tier: use [Plan Change](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-8.md) (`get_block("solution-billing-8")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

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

## About Billing blocks

### 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

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.