Invoice Detail Page
Single printable invoice with mono number, from/to addresses, tabular line items, subtotal/tax/total, a Paid badge, and download/print actions.
Single printable invoice with mono number, from/to addresses, tabular line items, subtotal/tax/total, a Paid badge, and download/print actions.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Invoice Detail Page is the single printable invoice view, opening on INV-2026-0341 issued and due Jun 1, 2026, with a Paid badge beside the mono invoice number and Print and Download PDF actions in the header. The from/to block pairs Shadcn UI Blocks, Inc. at 340 Pine Street with Acme Corporation at 1 Acme Plaza, Floor 12, addressed to Avery Stone. The line items table lists Team plan base at $96.00 and 9 seats at $12.00 each, right-aligned tabular, with a subtotal/tax/total footer and a paid date confirmation row.
Line items are a const array; the totals are standalone consts. The footer note names the billing email and confirms the PDF is identical to this page, which removes one support question per invoice sent.
Reach for this block on the invoice detail route, wired to your invoice endpoint. Pass the line items array and the from/to addresses; the Paid badge and date row come from payment status.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a SaaS subscription invoice. Other invoice types:
Tip: the paid date row below the total is what turns a total line into a receipt; without it customers open a support ticket asking for proof of payment.