Invoices list
Billing history with a status filter whose thumb slides while rows reflow, a download pill that fills as the PDF arrives and morphs into a check, and a Pay action that flips the status, with each status shown as an icon and label.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { InvoicesList } from '@/components/component-kit/items/block-invoices-list';
export function Example() { return <InvoicesList currency="EUR" onDownload={(invoice) => console.log(invoice.number)} />;}Props
| Prop | Type | Default | Description |
|---|---|---|---|
invoices | Invoice[] | 7 demo invoices | Invoices with id, number, date, description, amount in cents and status ("paid" | "open" | "overdue" | "refunded"). |
currency | string | "USD" | ISO 4217 code used to format amounts. |
onDownload | (invoice: Invoice) => void | undefined | Called when a row's download completes; fetch the PDF here. |
onPay | (invoice: Invoice) => void | undefined | Called after an open or overdue invoice is paid. |
compact | boolean | false | Two rows and the filter only, without the title, total or Pay buttons. |
autoPlay | boolean | false | Step through the filters and download the top row on a loop. |