Invoice history with counting totals, an upcoming invoice card, status filters, search and a year select over a table with status pills and download buttons. The table turns into stacked rows in narrow containers and exports to CSV locally.
Every charge for the Halcyon Labs workspace, with PDF-ready receipts.
| Invoice | Date | Description | Amount | Status | |
|---|---|---|---|---|---|
| INV-2026-0112 | Nov 1, 2026 | Team plan, 10 seats | $240.00 | Open | |
| INV-2026-0098 | Oct 1, 2026 | Team plan, 10 seats | $240.00 | Paid | |
| INV-2026-0091 | Sep 14, 2026 | Extra build minutes, 2,000 | $36.00 | Paid | |
| INV-2026-0085 | Sep 1, 2026 | Team plan, 10 seats | $240.00 | Failed | |
| INV-2026-0071 | Aug 1, 2026 | Team plan, 8 seats | $192.00 | Paid | |
| INV-2026-0064 | Jul 19, 2026 | Seat added mid-cycle, prorated | $14.20 | Refunded | |
| INV-2026-0058 | Jul 1, 2026 | Team plan, 8 seats | $192.00 | Paid | |
| INV-2026-0042 | Jun 1, 2026 | Team plan, 8 seats | $192.00 | Paid |
npx shadcn@latest add https://hyperblur.dev/r/checkout-invoice-history.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-invoice-history.tsx.
import { CheckoutInvoiceHistory } from "@/components/hyperblur/checkout-invoice-history"
<CheckoutInvoiceHistory onDownload={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Invoices" | Section heading. |
| subtitle | string | Line under the heading. | |
| invoices | { id: string; date: string; year: number; description: string; amount: number; status: "paid" | "open" | "failed" | "refunded" }[] | 10 invoices | Rows of the table. |
| upcoming | { date: string; lines: { label: string; amount: number }[] } | Dec 1, 2026 | Upcoming invoice preview. Negative amounts show as credits. |
| currency | string | "USD" | ISO currency code. |
| onDownload | (invoiceId: string) => void | Replaces the built-in text download when provided. | |
| onFilterChange | (filter: { status: "all" | "paid" | "open" | "failed" | "refunded"; query: string; year: number | "all" }) => void | Called whenever a filter changes. | |
| accent | string | "#f59e0b" | Open status, sparkline and upcoming card color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |