Invoice summary, printed receipt and payout statement cards — each with a money moment: counting totals, a print-in receipt and an optimistic mark-as-paid stamp.
Invoice summary
summary.tsxClient, counting amount due, collapsible line items and totals, with an optimistic mark-as-paid that stamps the card.
| Prop | Type | Default | Description |
|---|---|---|---|
number / client / clientEmail | string | — | Invoice id and who it is billed to. |
issuedOn / dueOn / paidOn | string | — | Display dates. |
items | { description; quantity; unitPrice }[] | — | Line items in major units. |
taxRate | number | 0.08 | Tax as a fraction of the subtotal. |
status | "paid" | "due" | "overdue" | "due" | Initial status. |
currency | string | "USD" | ISO currency code. |
onMarkPaid / onSendReminder | () => void | — | Action handlers. |
Receipt
receipt.tsxPaper receipt that prints in from the top, with dotted leaders, a drawn barcode and tear edge, and a download button that fills with progress.
| Prop | Type | Default | Description |
|---|---|---|---|
merchant / meta / orderId | string | — | Header text and the barcode value. |
lines | { label; amount; quantity? }[] | — | Purchased items. |
tip / taxRate | number | 3 / 0.0875 | Added to the total. |
paymentMethod | string | "Card •• 4821" | Shown next to the paid mark. |
currency | string | "USD" | ISO currency code. |
onDownload / onEmail | () => void | — | Download fires when the simulated progress completes. |
Payout statement
payout.tsxMonthly payout with period tabs, a counting net amount and a stacked breakdown bar that highlights from its legend.
| Prop | Type | Default | Description |
|---|---|---|---|
periods | PayoutPeriod[] | — | { key, label, gross, fees, refunds, reserve, status, arrival } per tab. |
defaultPeriod | string | — | Initially selected period key; defaults to the last. |
destination | string | — | Bank account the payout goes to. |
currency | string | "USD" | ISO currency code. |
onViewStatement | (period: string) => void | — | Statement button handler. |
Install the whole set
Installs every invoice cards variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Statuses always pair colour with an icon and a word; amounts keep a static screen-reader value while the visible figure counts.
- Expandable line items use aria-expanded/aria-controls; the period switcher is a tablist.
- Reduced motion removes the receipt print-in, height springs and stamp spin, leaving fades.