shadcn.io is not affiliated with official shadcn/ui
Upcoming Invoice Preview Billing Block for Radix UI
The next invoice while it is still accruing: a ledger of plan, seats, metered API calls, a credit and estimated tax with so-far and by-the-date columns, a switch that includes projected usage in the total, and a real text download of the draft.
Installation
Overview
Show customers what the next invoice will be before it exists, with this upcoming invoice for React with Radix UI. A compact header names the billing date and holds a Switch, "Include my projected usage". Inside a hairline frame with a plus mark on each corner, a native table lists the draft's lines, the plan, the seats, the metered API calls, an onboarding credit and the estimated tax, each with a "So far" column and a "By 12 Nov" column; the metered line projects from a typed daily average times the days remaining. The column the switch chooses is the stronger one, and a total band under the table flips between the total so far and "about" the total on the billing date, with the card it will be billed to named beside a two-letter tile. The only Shine Button is wrapped in a Download Trigger and saves a real text file of the draft. On a phone every line is a card that folds both columns into its first cell. It's built from Switch, Badge, Download Trigger, Shine Button and Guides, with a CSS entrance only. For billing pages of usage-based products.
FAQ
How do I fill it from my billing system?
The constants at the top hold the account: PLAN_CENTS, SEATS and SEAT_CENTS, the metered CALLS_SO_FAR, the CALLS_PER_DAY average used for the projection and the CALL_RATE per million, the credit, TAX_BPS in basis points, the three ISO dates and the card. Replace them with your upcoming-invoice response; the day counts, the projection, each column and the totals all derive from them, in whole cents.
How is the projection worked out?
Only the metered line moves: its by-the-date value is the usage so far plus the typed daily average times the days remaining in the cycle, priced at the per-million rate. Flat lines, the credit and the seats are the same in both columns. Tax is estimated on each column's subtotal and rounded to the cent. It is an estimate; the real invoice may differ if usage changes, so the file says so.
Is the download real?
Yes. The Download Trigger builds a text file from the typed lines in the browser, with both columns for every line and a closing sentence that the draft is not an invoice, and saves it as wavefold-draft-invoice-2026-11-12.txt. Nothing is uploaded. Replace draftText with your own format, or fetch a PDF from your server in the same place.
What stays local?
The whole page is a draft: nothing is billed until the date, the card is only named, and the status line says "Draft only" until you act. The switch changes which total is shown and announces it in a polite status message; the download announces that the file was saved. There is no card form here: in production collect cards in your payment provider's hosted fields and show only the brand and last four digits.
Is the table accessible?
The table has a caption, column headers and a row header for each line, and amounts are text with a real minus sign for the credit. The stronger column is also set apart by weight, not colour alone. It is a native table on every library, so the arrow keys are never taken from the switch and the page.