Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

What Changed Win-Back Subscription Billing Block for React Aria

A win-back screen that lists the five releases shipped since you cancelled, tags the ones that touch features your account used, filters to those, and offers a free first month with the days left to claim it.

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

Win back a customer by showing what they missed, with this reactivation offer for React with React Aria. A hairline frame with a plus mark on each corner holds a band of releases, each a ruled row with its date, its name, one sentence and, when it touches a feature the account used, an outline Badge that reads "Relates to what you used" with a tick. A Segment Group in the header switches the list between All and Related to you, and the count beside the heading follows it ("5 releases, 3 relate to what you used"). Under the list the offer is one sentence: the first month is free if you return by a date, with the days left worked out from today. Shine Button Come back to Pro, the only colored control, claims it. For music, learning, productivity and creative apps that ship often.

FAQ

How do I fill it from my changelog and analytics?

RELEASES holds one entry per release with an ISO shipped date, a title, a summary and the feature it touches. USED lists the features this account used while it was subscribed; a release is tagged when its feature is in that list, and the counts in the heading come from the same two lists. CANCELLED, OFFER_ENDS and PRICE set the dates and the price. Load the releases newer than the cancel date and the used features per account on your server.

Does the filter move the page?

No. The live list and an unseen copy of all five rows share one grid cell, so the panel keeps its height whichever filter is on and the offer below stays where it is. The unseen copy is hidden from assistive technology and cannot take focus. The filter has two choices, so neither one is an empty list.

How are the days left worked out?

From the ISO dates in UTC: the offer's last day minus AS_OF, the day the page treats as today. There is no clock at render, so the page reads the same on the server and in every time zone, and the foot says "6 days left to claim this." until the offer is claimed. The first charge date is a month after today at the plan price.

What stays local in the demo, and how do I wire it?

Come back to Pro sets a flag and the status line says "Claimed in this demo. Nothing was charged." Nothing is sent, no account is reactivated and no discount is applied. In your app call your billing provider in claim, apply the free month on the server, and handle the cases where the offer has ended or was already used.

What does a screen reader hear?

The heading above the list names it, the filter is a radio group named "Show releases", and each date sits in a time element. The tag is text with a tick, never a color alone. The status line is polite and says how many days are left or that the offer was claimed.

How does it look on a phone?

Each row keeps its date beside its title and the tag drops under the summary. The offer and Come back to Pro stay in a foot that sticks to the bottom of the screen while the list is longer than the window.

All 167 billing blocks