shadcn.io is not affiliated with official shadcn/ui
Invoice History Billing Block for React
An account's invoices: a table filtered by status (paid, due, failed) with amounts, dates and PDF links, and a retry on the failed payment. On a phone each invoice is a card.
Installation
Overview
Show customers what they've been billed, with this invoice history section for React with Base UI. A hairline frame with a plus mark on each corner holds a Segment Group that filters the list to All, Paid, Due or Failed, each with its count, and a Table with a row per invoice: its number and what it bills for, the date, the amount in tabular figures, an outline status Badge with a dot in the status color (paid, due with its date, or failed) and a PDF link. The failed payment carries the reason and a Shine Button to retry, the only colored control; retrying settles it, the badge turns to Paid and the counts update. The frame's bands are ruled by Guides and the last states how many invoices are shown, with a link to export them. Below the medium breakpoint each invoice is a card instead of a row. It's built from Table, Segment Group, Badge, Button, Shine Button and Guides, with a CSS entrance only. For billing settings, account pages and any subscription app.
FAQ
How do I fill it with my invoices?
Edit INVOICES. Each has an id (its number), an ISO date, a description, the amount in dollars, a status of paid, due or failed, an optional dueOn date for a due invoice and an optional note such as the reason a payment failed. Dates are written in UTC, so they read the same on the server and in every visitor's time zone. Point each PDF link at its invoice file.
Does the filter really filter?
Yes. The segments are real radio-style buttons: choosing one shows only the invoices with that status, the table and the cards both, and every segment keeps its count, which follows any change to the data. When a filter has nothing left, such as Failed after a retry, a short message replaces the list.
What does Retry payment do?
In the example it marks the failed invoice as paid and says so in a polite status message, to show the whole flow. Replace it with a call that retries the charge on your server, and update the invoice from the result, showing the decline reason again if it fails. Once the button goes away, focus moves to that invoice's PDF link so keyboard and screen reader users don't lose their place, and if the Failed filter was on, the list switches to All so the invoice you just paid stays in view.
Is the table accessible?
The table is named, its columns have headers, and the invoice number leads each row. Status is written out ("Failed", "Paid", "Due Oct 22"), never only a color. The PDF and retry buttons say which invoice they act on for a screen reader, since several rows share the same visible words.
Where do the links go?
The PDF links and "Export as CSV" are links to your own files or routes. They're Buttons with render set to an a element and nativeButton={false}. The footer counts the invoices shown against the invoices there are; it has no paging, so for a long history load more in pages of your own.
Related
- Pro
Current Plan Billing
Plan and usageThe account's current plan in app settings: plan, price, renewal date and card, a change-plan action, every quota's usage this period on shared hairlines, and the next invoice.
- Pro
Invoice Preview Pricing
Comparison tablesThree payroll plans as itemised monthly invoices: pick a headcount and each plan's bill adds up line by line, with its total and call to action at the top of its column.
- Pro
Payment Schedule Pricing
Billing switchesTuition paid once or in 3, 6 or 12 installments: four chips pick the schedule and a calendar of twelve monthly cells fills with the dated payments and their amounts, over the total and the call to action.
- Pro
Overage Pricing
Usage and creditsOverage pricing drawn as an area chart: pick a plan and see its monthly bill against the gigabytes ingested, a flat shaded block for the allowance and a rising wedge for every extra gigabyte, beside the price and a table of allowances.
- Pro
Credit Top Up Billing
Payment and invoicesA credit wallet: the balance and what it will be after the top-up, amount chips with a custom amount, auto-recharge with a threshold and amount, a pay button with a live total and the recent top-ups.
- Pro
Payment Method Billing
Payment and invoicesPayment methods in app settings: the card on file with an expiry warning, a backup bank account, a button that sets the default, and a dialog that checks and updates the card.