Product Grid
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/invoiceInvoice
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.
Props
Other props pass through to the root element.
number*
string
issueDate*
string
YYYY-MM-DD.
dueDate*
string
YYYY-MM-DD. An open invoice reads "Due soon" within
dueSoonDaysof it and "Overdue" after.status
InvoiceStatus
Default
"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*
InvoiceParty & { logo?: React.ReactNode }
billTo*
InvoiceParty
shipTo
InvoiceParty
details
{ label: string; value: React.ReactNode }[]
Extra rows beside the dates: "PO number", "Terms".
items*
InvoiceItem[]
discount
{ label: string; /** A fixed amount, or a percent of the subtotal with `percent…
taxes
InvoiceTax[]
Default
[]amountPaid
number
Default
0Already 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
Default
7currency
string
Default
"USD"locale
string
Default
"en-US"
| Description | |||
|---|---|---|---|
| number* | string | – | |
| issueDate* | string | – | YYYY-MM-DD. |
| dueDate* | string | – | YYYY-MM-DD. An open invoice reads "Due soon" within |
| 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* | InvoiceParty & { logo?: React.ReactNode } | – | |
| billTo* | InvoiceParty | – | |
| shipTo | InvoiceParty | – | |
| details | { label: string; value: React.ReactNode }[] | – | Extra rows beside the dates: "PO number", "Terms". |
| items* | 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" |
Related
Block
Product Detail
Commerce