Billing Payment Success Confetti
A payment success screen for the moment right after checkout, pairing a checkmark with a small burst of colored dots arranged around it for a celebratory feel. The dots are static Tailwind-styled elements, not a canvas or JavaScript animation, so there's nothing to load or trigger. Built for the redirect target after a successful charge or subscription upgrade.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-payment-success-confetti.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing88.tsx instead.
Usage
The file also exports billing88Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing88, billing88Demo } from "@/components/blocks/billing/billing88"; export default function Page() { return <Billing88 {...billing88Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Payment successful" | Main headline. |
| message | string | none | Optional supporting sentence under the heading. |
| amount | string | none | Optional amount charged, shown in a highlighted box. |
| planName | string | none | Optional plan or billing cadence text under the amount. |
| ctaLabel | string | "Go to dashboard" | Label on the primary button. |
| ctaHref | string | none | Destination for the primary button. |
| secondaryLabel | string | none | Optional label for a secondary text link, e.g. "View receipt". |
| secondaryHref | string | none | Destination for the secondary link. Both secondaryLabel and secondaryHref must be set for the link to render. |
| className | string | none | Extra classes for the outer card. |
Behavior notes
- The confetti effect is a fixed set of small colored spans positioned around the checkmark with Tailwind position and rotation utilities, not an animation library or canvas element, so it renders identically on every page load with zero client-side JavaScript.
- The amount/plan box only renders when at least one of amount or planName is passed, so the card still looks complete without transaction details.
- The secondary link only renders when both secondaryLabel and secondaryHref are provided.
- The decorative dots are wrapped in an aria-hidden span so screen readers skip straight to the heading and message.
- This is a static, non-interactive component; there's no confetti trigger, timer, or replay action.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.