shadcn.io is not affiliated with official shadcn/ui
Print Invoice Checkout Block for Vue
A print-ready invoice you set up before taking it away: A4 or Letter paper, SKUs and payment details on or off, a line table with a tax rate per line grouped into a tax summary, and a download of the invoice as an HTML file with a matching page size or as CSV.
Installation
Overview
Let people take a proper invoice away, with this print invoice for Vue with Ark UI. A compact header from Vellum and Vine, a letterpress stationer, sits over a hairline frame with a plus mark on each corner. A toolbar sets up the page: a Toggle Group for paper size (A4 or Letter) and two Switches, Show SKUs and Show payment details. Below it the sheet is a paper-like figure with the seller and the buyer, a table of four lines each with its own tax rate, a tax summary grouped by rate, the net, the tax and the total due, and the payment terms; it re-lays itself as you change the options, and the paper size changes its width. Download invoice, the only Shine Button, saves a real HTML file whose page size follows the paper, ready to open and print; an outline Download CSV saves the lines. On a phone the sheet scrolls sideways inside its band and the options stay above it. For receipts, invoices and any order that needs a paper copy.
FAQ
How do the downloads work, and why is there no print button?
Both files are a Blob saved by a temporary link in the click handler, so they are real files on your device and nothing is uploaded. The invoice is an HTML page with an @page rule set from the paper you chose (A4 or Letter), so opening it and pressing print gives the right sheet. A button that calls window.print on the page would print the whole site and its chrome, which is why the block makes a clean file instead.
How is tax worked out?
Each line has a rate in whole percent. Lines are summed per rate (0%, 5% and 20% here) and the tax of each group is its net times the rate, rounded half up to the cent, so the summary rows add up to the total tax. Everything is integer cents; usd and dollarsText are the only places that write dollars.
What do the options change?
Paper size changes the sheet's width on screen and the file's @page size. Show SKUs prints a line of code under each description (and a column in the CSV). Show payment details shows the bank details under the terms; its place is kept when it is off, so the sheet never changes height. The status line says what changed.
Are the bank details real?
No. The account uses a GB00 TEST IBAN and a TESTGB2L code, which are not valid anywhere, and the tax number is marked TEST. Replace them with your own and keep real details out of any client-side bundle you do not control.
How do I read the sheet on a small screen?
The sheet keeps its width and scrolls sideways inside a labelled region that takes focus, so arrow keys scroll it. The options above it stay put, and the foot with the downloads stays pinned to the bottom of the screen.
What stays local in the demo, and how do I wire it up?
The invoice, its lines and rates are typed constants, and the files are built in the browser. In your app render the invoice your billing API returns, generate the file on your server if it must be signed or archived (a PDF, a legal numbering), and link it from here.