shadcn.io is not affiliated with official shadcn/ui
Order Invoice Storefront Block for React Aria
An invoice drawn as a document in an inset frame with tax worked out per line, a Returned checkbox that adds a credit note and a net total, a Print button and a real text download.
Installation
Overview
Give shoppers an invoice they can read, print and keep, with this order invoice for React with React Aria. A header names the invoice and the shop, Ostler & Pine, a picture-framing workshop. In a hairline frame with a plus mark on each corner, a toolbar band holds Print and a Shine Button for Download, over the invoice drawn as a document in a Frame: the invoice number, typed dates, the billing and delivery places as text, a table of lines with SKU, quantity, unit price, the tax at its rate and the amount, and the totals. A Checkbox named Returned on each line puts it on a credit note under the totals, with its own tax, and the net total follows; the credit area keeps its height whatever is ticked. Print opens the browser's print dialog and Download saves a real text file of the invoice and its credit note. Below the medium breakpoint each line becomes a card. It's built from Frame, Checkbox, Label, Button, Shine Button and Guides, with a CSS entrance only. For an order page, an account area or a receipt.
FAQ
How do I fill it with my own invoice?
Edit INVOICE (number, dates, billing and delivery text) and ROWS. Each line has a sku, a name, a qty, a unit price in whole cents before tax and a rate in hundredths of a percent (2000 is 20%, 0 is zero-rated). Everything else is derived: a line's net, its tax and its amount, the subtotal, the tax total and the invoice total.
How is tax worked out?
Per line, in integer cents, rounded half up: (net * rate + 5000) / 10000, floored. Each line carries its own tax, so the tax total is the sum of the lines and the amounts always add up to the total with no fraction of a cent carried. A zero-rated line shows $0.00 at 0%.
What does Returned do?
It adds the whole line to a credit note with the tax that line carried, and the credit and net total update. Nothing is sent to the shop: the ticks only change this page and the file you download. To record a real return, replace tick with a call that creates the credit note and returns it.
Are Print and Download real?
Yes. Print calls window.print(); the toolbar and the status line are hidden when printing. Download builds a plain text file from the same data, with a Blob and a temporary link, and saves it as invoice-OP-3091.txt; nothing is uploaded. Swap textOf for a PDF from your server if you need one.