shadcn.io is not affiliated with official shadcn/ui
Subscription Renewed Notification Block for React Aria
A streaming service's renewal receipt with dotted-leader lines, a tax and a total worked out from the typed lines, the card and next renewal, an email-receipts switch and a real receipt download.
Installation
Overview
Tell people a renewal went through and give them the proof with this receipt notice for React with React Aria. It is Reelnook, a streaming service, in a narrow hairline frame with plus marks at its corners. The Studio plan renewed on a fixed day, and a Data List draws the lines of the charge on a dotted leader: the plan as 5 seats times $12.00, the tax at 8 percent and the total, all worked out from the typed lines. Under them are the card charged, the next renewal and a Switch that turns emailed receipts on or off. Download receipt, the one Shine Button, writes a real text file. A status line says what happened. For renewal notices, receipt pages and confirmation emails shown in the app.
FAQ
How do I use my own lines?
Edit CHARGES (name, detail, amount in cents), TAX_RATE, RENEWED, NEXT and CARD. The subtotal, the tax and the total are computed from the lines, so the receipt cannot disagree with itself, and the downloaded file is written from the same data.
What does Download receipt do?
It builds a small text file from the receipt (the lines, the tax, the total, the card and the next renewal), hands it to the browser as reelnook-receipt-2026-10-13.txt and says so in the status line. There is no print button: use your app's own PDF if you need one.
What does the email switch change?
Only this page: it turns the switch and the status line says whether receipts would be emailed. Nothing is sent. In your app save the preference from toggle and send the email from your server.