Invoice history table for SaaS billing pages: next invoice as a dashed estimate, paid / open / past-due / refunded / void status chips, notes for unusual amounts, per-row PDF download and Show older. React + Tailwind; your backend supplies the rows.
import { InvoiceHistory, type InvoiceRow } from "@/components/ui/invoice-history-table";
/* ==========================================================================
Northwind Studio's billing history on the Team plan, $89 a month.
The next invoice sits above the record, dashed, because it has not
happened yet. July is $101 — one seat over, at $12 — and May was refunded,
so the history carries its own explanations instead of leaving them to a
support ticket. Amounts are integers in cents.
========================================================================== */
const INVOICES: InvoiceRow[] = [
{ number: "INV-2026-0914", date: "14 Sep 2026", amount: 8900, status: "paid", description: "Team · monthly" },
{ number: "INV-2026-0814", date: "14 Aug 2026", amount: 8900, status: "paid", description: "Team · monthly" },
{ number: "INV-2026-0714", date: "14 Jul 2026", amount: 10100, status: "paid", description: "Team · monthly", note: "1 seat over" },
{ number: "INV-2026-0614", date: "14 Jun 2026", amount: 8900, status: "paid", description: "Team · monthly" },
{ number: "INV-2026-0514", date: "14 May 2026", amount: 8900, status: "refunded", description: "Team · monthly", note: "Refunded 18\u00a0May" },
{ number: "INV-2026-0414", date: "14 Apr 2026", amount: 2900, status: "paid", description: "Starter · monthly" },
];
export default function InvoiceHistoryDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-[560px]">
<InvoiceHistory
invoices={INVOICES}
next={{ date: "14 Oct", amount: 8900, description: "Team · monthly" }}
subtitle="Northwind Studio · USD"
pageSize={4}
onDownload={(number) => {
/* Fetch the PDF from your billing backend here. */
console.info("download", number);
}}
/>
</div>
</div>
);
}
Part of Layro — browse the full library on 21st.dev.