shadcn.io is not affiliated with official shadcn/ui
Receipt Email Preview Billing Block for Radix UI
Seven switches for what a receipt email shows (company, address, tax ID, PO number, card, usage and a note) beside a drawn email that redraws live, with the tax ID locked on for a German account.
Installation
Overview
Let customers decide what their receipts say, with this receipt email preview section for React with Radix UI. A hairline frame with a plus mark on each corner holds two cells. The first is a list of seven Switches for Parcelwren, a shipping-label tool: company name, billing address, tax ID, PO number, card last four, usage detail and a note, each with a line of what it prints. The tax ID is locked on, with a lock and the reason, Required on invoices in Germany, because the example account is in Germany. The note is a Textarea capped at 140 characters with a counter, editable once its switch is on. The second cell, ruled off by Guides, is a drawn receipt email that redraws as you flip a switch: the lines and total stay, and only the chosen details appear. The action foot says how many changes are not saved; Save receipt layout, the only Shine Button, keeps them for the page, and Discard puts the saved layout back. On a phone the email sits under the switches. For billing settings, invoicing and anything that sends receipts.
FAQ
How does the email stay in step with the switches?
Both read the same layout state. The email is drawn by one component from that state and the typed account (ACCOUNT), so a switch cannot say one thing and the email another. The note is shown only when its switch is on and it has text.
Why can't I turn the tax ID off?
The example account is in Germany and TAX_ID_REQUIRED lists Germany, so the switch is checked and disabled with its reason beside it. The list is a typed rule for the demo, not a statement of any country's law: replace it with what your tax advisor or your invoicing provider requires, and show the reason you actually use.
How is the note limited?
To 140 characters by maxLength and again when you type, with a count under the field. It stays read-only while its switch is off, and the text you wrote is kept so turning the switch on again brings it back.
What do Save and Discard do?
Save copies the layout and the note into the saved state and says Saved in this demo, nothing was sent. Discard puts the saved layout back. Both buttons stay on screen and answer when there is nothing to do ("No changes to save.") instead of disappearing.
What stays local in the demo, and how do I wire it up?
Everything. No receipt is emailed, the account, the address, the tax ID and the lines are made up, and a reload starts from the saved layout in the file. In your app post the layout from the submit handler, store it on the account, and render real receipts from it on the server so the drawing and the email cannot drift apart.