# Send Invoice block

> Invoice send wizard with step progress bar, line-item table, and live tax and discount totals

Four-step invoice send flow with progress Stepper, editable line-item Table, and live subtotal, tax, discount, and total. ReUI Stepper, Badge, shadcn Combobox, Card, Select, Calendar, Table, Tooltip. For billing, checkout, invoicing wizards.

- Type: Pro block
- Category: [Wizard](https://web.dev.reui.io/blocks/application/wizard.md)
- Page: https://web.dev.reui.io/blocks/application/wizard/wizard-3
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/stepper.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/stepper.md
- MCP: `get_block("wizard-3")`
- Built with: Badge, Button, Calendar, Card, Combobox, Field, Input, Input Group, Popover, Select, Separator, Spinner, Stepper, Table, Textarea, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A full page editor with a thin progress bar in a sticky header, a line item table with per row tax and a discount on the last step

## Agent notes

- Sample rows come from `INVOICE_CUSTOMERS`, `INVOICE_PRODUCTS` and `DEFAULT_INVOICE_LINES`; per row tax comes from `TAX_RATE_OPTIONS`
- The customer `Combobox` is uncontrolled and `selectedCustomer` never changes, so picking another customer fills no tax ID or address
- `handleSaveDraft` and `handleSubmit` only call `showInvoiceToast`, and the close `Button` in `InvoiceWizardHeader` has no `onClick`

## When not to use

- A compact billing profile in a narrow card with no line items: use [Billing Setup](https://web.dev.reui.io/blocks/application/wizard/wizard-1.md) (`get_block("wizard-1")`)
- Buying token credits with auto top-up controls and a stepper: use [AI Credit Checkout](https://web.dev.reui.io/blocks/ecommerce/checkout/checkout-3.md) (`get_block("checkout-3")`)

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react) (the docs follow the latest Motion, with no React API break since v12)
- 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/wizard-3
```

## About Wizard blocks

### When to use

- Money tasks done in steps: account billing setup, sending an invoice, a seat upgrade or a fund transfer
- Admin intake in steps: a vendor compliance file, a store product with variants or a batch of team invites
- A long form split into 3 to 5 numbered steps with previous and next buttons and a summary before submit

### When not to use

- A first run setup right after signup that collects a profile, a role and goals: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)
- Only numbered step markers and panel switching around fields you already built: use [Stepper](https://web.dev.reui.io/components/stepper.md) (`get_component("stepper")`)
- A shopper paying for a cart, entering shipping and card details beside an order summary: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- Steps come from `WIZARD_STEPS`, `PRODUCT_STEPS` or `PAYMENT_STEPS` in the data file, and each step id has its own render branch; add both for a new step
- No step calls an API: the final button shows a sonner `toast`, sets local state such as `isIssued`, or both; post the collected values from that handler
- Each page.tsx sets a `min-h-svh` wrapper and the full screen variants size their root to the viewport too; remove both inside an app shell or dialog

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.