Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Payment Alert Notification Block for React

A billing service's money events as a table of five rows with signed amounts and status words, a filter for what needs action, and a failed payment you can retry or move to another card.

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

Put every money event of an account in one calm list with this payment alert for React with Base UI. It is Tillmoor, billing for small shops, in a hairline frame with plus marks at its corners. A table lists five events (a payment received, a renewal upcoming, a payment failed, an invoice ready, a payout sent) with the date, a status in words and an icon, and a signed amount with a real minus sign. A Toggle Group in the header switches between All and Needs action, and the table keeps its height either way. Under the table the failed payment has its fix: a Select changes the card (ending 0099 or 4242) and Retry payment, the one Shine Button, sends it. For billing alerts, finance dashboards and any account with money in and out.

FAQ

How do I use my own events?

Edit EVENTS (name, detail, date in UTC, signed amount in cents, status), CARDS and FAILED, the id of the event the fix belongs to. The amounts are formatted from cents, the sign is a plus or a real minus, and "Needs action" is every event that is Failed or Open.

How is a status told apart without colour?

Every status is a word with its own icon (a check for Settled, a clock for Scheduled, an alert for Failed, a file for Open, a send arrow for Sent), and only the failed icon takes the destructive colour. The amounts carry their sign, so money in and out never depends on a tint.

What does Retry payment do, and what stays local?

It marks the failed event as Processing and says "Processing, we will tell you (demo, nothing is charged)". The card select picks which card the message names and is locked once the retry is sent. In your app post the retry from retry, send the chosen card with it and update the row from the response or a webhook.

Does the filter change the layout?

No. The table holds the height of five rows, so Needs action leaves blank space where the other rows were instead of pulling the fix up. The toggle group always has one choice pressed.

How does it look on a phone?

The table folds its date and status into the first cell under the event name, so it has two columns: the event and the amount. The fix stacks under it, with the card select above the Retry payment button.

  • 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

    System Alerts by Severity Notification

    Incidents and alerts

    An infrastructure monitor's alert panel: a count of open alerts by severity, and an accordion of three systems with their facts, an Acknowledge and a one-hour Mute that says when it ends.

  • 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