Invoice List Block React component
An invoice list with status tabs that show their totals, an aging bar that splits what is outstanding by how late it is, checkboxes for sending reminders or marking invoices paid in bulk, overdue badges and a download button that builds a real PDF.
About the Invoice List Block component
Invoice List Block is a billing screen in one card. Five tabs split invoices into All, Draft, Outstanding, Overdue and Paid, and each tab shows how many invoices it holds and what they add up to, so the numbers are visible before you click.
Under the tabs an aging bar shows how much unpaid money is not due yet, 1 to 30 days late, 31 to 60 days late or more than 60 days late. Tick rows to send reminders or mark them paid in one go, and download any invoice as a real PDF that the block builds itself.
When to use it
Use it in a SaaS billing page, a freelancer or agency dashboard, or the accounts area of an admin panel.
Pass your own onDownload if your backend already renders branded PDFs; the built-in one is a clean plain-text layout.
Installation
Add the Invoice List Block component to your project with the shadcn CLI. It lands in components/invoice-list.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/invoice-listOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<InvoiceList /> accepts 10 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Invoices" |
| invoices | Invoice[] | — |
| currency | string | "$" |
| today Today as YYYY-MM-DD, for overdue days. Defaults to 2026-11-01. | string | "2026-11-01" |
| seller Your business, printed on the PDF. | string | "Nexora GmbH" |
| onRemind Called when reminders are sent. Return a promise; the toast waits for it. | (ids: string[]) => void | Promise<void> | — |
| onMarkPaid Called when invoices are marked as paid. | (ids: string[]) => void | Promise<void> | — |
| onDownload Replace the built-in PDF with your own download. | (invoice: Invoice) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Invoices"
- invoicesInvoice[]
- currencystringDefault: "$"
- today
Today as YYYY-MM-DD, for overdue days. Defaults to 2026-11-01.
stringDefault: "2026-11-01" - seller
Your business, printed on the PDF.
stringDefault: "Nexora GmbH" - onRemind
Called when reminders are sent. Return a promise; the toast waits for it.
(ids: string[]) => void | Promise<void> - onMarkPaid
Called when invoices are marked as paid.
(ids: string[]) => void | Promise<void> - onDownload
Replace the built-in PDF with your own download.
(invoice: Invoice) => void - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Invoice List Block FAQ
- How is overdue worked out?
- An open invoice whose due date is before today is overdue, and the badge shows how many days. Pass today as YYYY-MM-DD so server and browser agree; it defaults to a fixed demo date.
- Is the PDF real?
- Yes. Download writes a small valid PDF by hand with your seller name, the customer, line items and total, and saves it as the invoice number. It uses plain ASCII text, so pass onDownload for logos or non-Latin characters.
- What do the bulk actions do?
- Send reminder only counts open invoices and Mark as paid counts open and draft ones; the labels show how many will be affected. Both call your onRemind or onMarkPaid and wait for the promise before showing a toast.
- Does it work on phones?
- The tabs become a two-column grid and the table scrolls sideways, so nothing is squeezed or hidden.
- Is it accessible?
- Tabs use the tablist pattern, checkboxes are real inputs with labels such as 'Select NX-2026-0318, Halcyon', icon buttons have labels, the aging bar has a text description and the selection count and toasts are announced.
