An invoice summary with a Paid, Due or Overdue status pill, line items, download and pay buttons, and a perforated bottom edge.
Billed to Orchard Studio · Due Nov 11
Amount due$3,480.00
npx shadcn@latest add https://hyperblur.dev/r/pay-invoice-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-invoice-card.tsx.
import { PayInvoiceCard } from "@/components/hyperblur/pay-invoice-card"
<PayInvoiceCard number="INV-2041" status="overdue" onPay={() => openCheckout()} onDownload={() => downloadPdf()} />| Prop | Type | Default | Description |
|---|---|---|---|
| number | string | "INV-2041" | Invoice number. |
| status | "paid" | "due" | "overdue" | "due" | Status pill and button styling. The pay button is hidden when paid. |
| billedTo | string | "Orchard Studio" | Customer name in the subtitle. |
| dueDate | string | "Nov 11, 2026" | Due date text, shown for due and overdue invoices. |
| paidDate | string | "Nov 2, 2026" | Payment date text, shown for paid invoices. |
| items | { name: string; quantity?: number; price: number }[] | three sample lines | Line items. Prices are unit prices in minor units (cents). |
| currency | string | "$" | Currency symbol put in front of amounts. |
| onDownload | () => void | Called when the download button is clicked. | |
| onPay | () => void | Called when the pay button is clicked. | |
| downloadLabel | string | "Download PDF" | Text of the download button. |
| payLabel | string | "Pay now" | Text before the amount on the pay button. |
| accent | string | "#2f7bff" | Pay button and focus ring color. |