shadcn.io is not affiliated with official shadcn/ui
Payment Success Confetti Billing Block for Ark UI
A page for after a payment: a check seal, Welcome to Pro, what was paid and with which card, four unlocked features that flip from locked to unlocked one after another, a quiet fall of confetti and a button that replays the burst.
Installation
Overview
Celebrate a payment and show what it bought, with this payment success page for React with Ark UI. It's the page Kitesong, a music-lesson marketplace, shows a teacher after paying for Pro: the page's side rails and one band frame it, a drawn check seal and a headline say "Welcome to Pro", and one sentence gives the amount and the card ("$49.00 paid with Visa ending 4242"). A framed list holds the four things Pro unlocks, and each row flips from a muted lock to a check one after another by a CSS delay, so the list reads as it happens. A thin fall of Confetti drifts behind the content, and a ghost Confetti Button, Celebrate again, throws a burst and replays the sequence. The Shine Button opens the dashboard, the only colored control, and rides the foot of a phone screen. With reduced motion every row is already unlocked and no confetti shows. It's built from Confetti, Confetti Button, Shine Button and Guides, with CSS motion only. For upgrades, purchases and any paid tier.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was paid or unlocked here: the page describes a payment that already happened, and says it is shown after a payment in your app. The amount and the card are typed in PAYMENT and the four features in UNLOCKS. To wire it, route the customer here from your payment provider's success redirect, read the amount, the card and the plan from the order on your server, and build UNLOCKS from the plan's features.
How does the unlock sequence work?
Each row stacks a lock and a check in one cell. The lock starts visible and fades out, the check starts hidden and fades in, both through a CSS transition with a delay class from the row's data (300, 500, 700 and 1000 milliseconds), so the rows flip in order with no script. Celebrate again remounts the list, which plays the transition again. Screen readers read each row as "Unlocked" with its name and what it does, whatever the animation is doing.
What happens with reduced motion?
The transitions are off, so every row is already unlocked when the page appears. The confetti layer is hidden, and the burst from Celebrate again fades pieces in and out where they would land instead of flying. Nothing loops.
Where does the burst come from?
Celebrate again is a Confetti Button: a press throws a short burst from the point you pressed, from the middle for the keyboard, and the same press replays the list and the fall of confetti behind it. The fall itself is the Confetti component, a low count of pieces in foreground, muted and primary colors, faded out toward the bottom, which is decoration only, hidden from assistive technology and taking no clicks.