shadcn.io is not affiliated with official shadcn/ui
Invoice List Billing Block for React
Invoices grouped by tax year in two folding rows, a Net, Tax and Gross control that re-derives every amount and year total, a net, VAT and gross summary per year, and a real text file of the open year's tax summary.
Installation
Overview
Give customers their invoices the way an accountant files them, with this invoice list for React with Base UI. A compact header holds a Segment Group, Net, Tax or Gross, that swaps the amount column and every year total at once. Inside a hairline frame with a plus mark on each corner, two ruled rows, 2026 and 2025, show the year, its invoice count and its total in the chosen lens; only one opens at a time, so the panel never changes height. The open year lists its six invoices in a native table (number and what it bills for, the issue date, the status in words and the amount) over a summary of net, VAT at 20% and gross that always adds up. The only Shine Button saves the open year's tax summary as a real text file. The bands are ruled by Guides and the foot is pinned on a phone, where the date and status fold under the invoice number. It's built from Segment Group, Shine Button and Guides, with a CSS entrance only. For billing pages and tax-time exports.
FAQ
How do I fill it with my invoices?
Edit YEARS: each year has an id and invoices, and each invoice has an id, an ISO date, a description and cents, the net amount in pence. VAT is VAT_PERCENT of each invoice, rounded to the penny per invoice, so a year's tax is the sum of its invoices' tax and net plus tax is always gross. Change the currency in money and the rate for your country.
What does Net, Tax and Gross change?
The amount column and the year totals in the header rows. The summary under each table always shows all three, so the tax figure an accountant asks for is on screen whichever lens you read. The status line says which lens is showing, for people who can't see the change.
Why does only one year open at a time?
So the panel keeps one height. Both years list the same number of rows at a fixed row height, and the open one takes the space of the other, so the button below never moves. Pressing the open year does nothing; its row says it is expanded. If your years differ in length, hold the height with a minimum on the shared container.
Is the download real?
Yes. The button builds a text file of the open year in the browser, every invoice with its net, VAT and gross and the three totals, and saves it as clockwell-tax-summary-2026.txt (or 2025). Nothing is uploaded. Swap summaryText for your own format, or fetch a PDF from your server in the same place.
Is it accessible?
Each year row is a button inside a heading, with aria-expanded and aria-controls, and the closed year's table is hidden and inert so its rows leave the tab order. Tables have captions, column headers and row headers, and a paid status is written out. Amounts are plain text in one direction, so a right-to-left page keeps them readable.