# Invoice

> A hosted invoice page: issuer and logo, bill-to and ship-to, dates, and a status that reads Draft, Open, Due soon, Overdue, Paid or Void. Line items fold into cards when narrow. Totals take a percent or fixed discount and tax lines. Pay now runs your async payment and a rubber PAID stamp lands on the page. Bank details copy in one tap, Download shows progress, and it prints as a clean paper copy.

- Slug: `invoice`
- Category: [Commerce](https://www.assembli.design/category/commerce.md)
- Type: block
- Tags: invoice, billing, payment, receipt, pay-now, print, saas, accounts
- npm dependencies: lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/invoice
- Page: https://www.assembli.design/components/invoice

![Invoice preview](https://www.assembli.design/thumbnails/invoice-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `number` (required) | `string` |  |  |
| `issueDate` (required) | `string` |  | YYYY-MM-DD. |
| `dueDate` (required) | `string` |  | YYYY-MM-DD. An open invoice reads "Due soon" within `dueSoonDays` of it and "Overdue" after. |
| `status` | `InvoiceStatus` | `"open"` |  |
| `onPay` | `() => Promise<{ paidAt?: string; method?: string } \| void> \| void` |  | Called by Pay now. Resolve to mark the invoice paid; throw an Error to show its message. Hides Pay now when left out. |
| `paid` | `{ date: string; method?: string }` |  | When it was paid (YYYY-MM-DD) and how, for an invoice that starts out paid. |
| `from` (required) | `InvoiceParty & { logo?: React.ReactNode }` |  |  |
| `billTo` (required) | `InvoiceParty` |  |  |
| `shipTo` | `InvoiceParty` |  |  |
| `details` | `{ label: string; value: React.ReactNode }[]` |  | Extra rows beside the dates: "PO number", "Terms". |
| `items` (required) | `InvoiceItem[]` |  |  |
| `discount` | `{ label: string; /** A fixed amount, or a percent of the subtotal with `percent…` |  |  |
| `taxes` | `InvoiceTax[]` | `[]` |  |
| `amountPaid` | `number` | `0` | Already received toward this invoice. |
| `notes` | `React.ReactNode` |  |  |
| `terms` | `React.ReactNode` |  |  |
| `paymentDetails` | `InvoicePaymentDetail[]` |  | Bank transfer or other offline details, with optional copy buttons. |
| `onDownload` | `() => Promise<void> \| void` |  |  |
| `downloadHref` | `string` |  |  |
| `onPrint` | `() => void` |  | Defaults to printing the page; the document is styled for paper. |
| `today` | `string` |  | Today as YYYY-MM-DD, for due-soon and overdue. Defaults to the visitor's clock once hydrated. |
| `dueSoonDays` | `number` | `7` |  |
| `currency` | `string` | `"USD"` |  |
| `locale` | `string` | `"en-US"` |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/invoice/invoice.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/invoice
```

Registry item JSON: https://www.assembli.design/r/invoice.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.