Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Payment Alert Notification Block for Solid

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 Solid with Ark 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.

All 100 notification blocks