shadcn.io is not affiliated with official shadcn/ui
Plan Upgrade Success Block for Radix UI
An upgrade confirmation page: Free and Pro side by side in one card with the limits that changed and how much each grew, the start and renewal dates, and a quiet fall of confetti that stops with reduced motion.
Installation
Overview
Show what an upgrade bought with this confirmation page for React with Radix UI. It's the page Inkpetal, an illustration app, shows after a customer moves from Free to Pro: the page's side rails and one band frame it, a thin fall of Confetti in foreground tones drifts behind the content, a success mark and a headline say the plan changed, and one sentence gives the price and the renewal date. One framed card is split by a divider into Free (marked Before) and Pro (marked Now), each listing the three limits that changed; on the Pro side an outline Badge beside each label says how much it grew, worked out from the two plans. A list under the card gives the start and renewal dates, and the Shine Button starts using the new limits, the only colored control. It's built from Confetti, Badge, Shine Button and Guides, with a CSS entrance only. For upgrades, plan changes and any paid tier.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was upgraded or charged: the page describes a change that already happened. The limits are typed in LIMITS (the Free and Pro figure of each), the price in cents and the two dates in PLAN. To wire it, read the customer's old and new plan from your billing system, build LIMITS from them (list only what changed), and set the dates from the subscription. Point the button at the product.
What happens to the confetti with reduced motion?
It's hidden: the layer carries motion-reduce:hidden, so a visitor who asked for less motion sees no pieces at all, not a still scatter. Otherwise it's a low count of pieces in the foreground, muted and primary colors, falling slowly behind the content and fading out toward the bottom of the page. It's decoration only: it's hidden from assistive technology and takes no clicks.
Where do the plus figures come from?
They're worked out as the Pro figure minus the Free figure for each limit and formatted with its unit ("+49 GB"), so changing a limit in the data changes its badge. Assistive technology reads each Pro figure with "up from" and the old one, so the comparison is in the words, not only in the layout.
How does it look on a phone?
Free stacks over Pro, each a short list of three rows with the label at the start and the figure at the end, and the Shine Button is pinned to the bottom of the screen while the page scrolls under it, so it is on the first screen. From the small breakpoint up it sits in the flow, and the two plans sit side by side from the medium breakpoint with a divider between them.