Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Subscription Renewed Notification Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell people a renewal went through and give them the proof with this receipt notice for React with Base UI. 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.

How are amounts and dates written in other languages?

Each amount is a left-to-right span, so a price reads the same inside a right-to-left page, and the dates are written from fixed values with Intl (Fri, Nov 13). Change the locale in dayOf to localise them.

How does it look on a phone?

The panel keeps one column at 320 pixels: lines wrap under their label, the dotted leader shrinks and the Download receipt button is full width.

  • Pro

    Invoice History Billing

    Payment and invoices

    An account's invoices: a table filtered by status (paid, due, failed) with amounts, dates and PDF links, and a retry on the failed payment. On a phone each invoice is a card.

  • Pro

    Payment Receipt Success

    Payments and refunds

    A full-height payment confirmation split in two: what happened and what comes next on one side, an itemised receipt table with the tax worked out in cents, a copyable receipt number and a text download on the other.

  • Pro

    Achievement Notification

    A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.

  • Pro

    Project Activity Feed Notification

    A project's history as a vertical timeline split in two: six event types as chips with live counts in a start column, and the timeline of who did what beside them, filtered by the types you press, with Load earlier events and a designed empty state.

  • Pro

    Alert Banner Notification

    Incidents and alerts

    An operations console's banner bar over a sketch of its app: four notices queue by urgency and show one at a time, with Previous, Next, a link, Dismiss and Snooze all for an hour.

  • Pro

    Announcement Notification

    Floating cards

    A what's new card for a product analytics app: three updates in a carousel with Previous, Next and the place in words, a Don't show this again box, and a Dismiss that folds the card.

All 100 notification blocks