shadcn.io is not affiliated with official shadcn/ui
Invoice History Billing Block for Vue
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 Vue with Ark 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.