shadcn.io is not affiliated with official shadcn/ui
Pause Subscription Billing Block for React
Pause instead of cancelling: one, two or three months as choice cards, the resume date and first charge worked out, a timeline that grows with the choice, what stays available while paused, and one button that pauses and resumes.
Installation
Overview
Keep customers who would otherwise cancel, with this pause section for React with Base UI. A hairline frame with a plus mark on each corner holds three bands. The first offers one, two or three months as choice cards in a Radio Group, each with the date billing would resume. The second sets a timeline, a bar in your foreground color whose paused segment grows with the choice, and a Data List of the day full access ends, the day billing resumes and the first charge, beside a list of what stays available while paused and what doesn't. The last band holds a quiet "Cancel instead" link and a Shine Button, the only colored control, that pauses, and then becomes an outline button that resumes. For subscription apps, content and recipe services, and fitness and learning products.
FAQ
How do I fill it from my billing provider?
ACCOUNT at the top of the file holds the plan name, its monthly price in dollars and paidThrough, the last day of what's already paid for, as an ISO date. WHILE_PAUSED lists what stays and what doesn't, each with a label and kept true or false, and MONTHS lists the choices. The resume date is paidThrough plus the months chosen, worked out in UTC so it's the same everywhere. Replace the constants with your subscription and wire toggle to your pause and resume calls.
Why does one button pause and resume?
So focus stays where the person put it. Pressing "Pause for 2 months" turns the same button into "Resume now" and changes it from the primary to the outline variant, instead of swapping in another element that would drop focus to the page. A polite live region announces "Paused. Billing resumes on…" or "Pause cancelled…". The choice cards are disabled while paused so the dates can't drift from what was confirmed.
What does the timeline show?
A bar in two segments: full access, which is fixed, and the paused period, whose width follows the number of months through a CSS variable and animates with a transition. Choosing a longer pause lengthens the second segment. The bar is decoration, hidden from assistive technology; its legend and the Data List beside it carry the dates as text.
Where does Cancel instead go?
It's a link to your cancellation flow, so point its href there. It's a ghost button, so the pause stays the one colored action. It's a Button with render set to an a element and nativeButton={false}.
What does a screen reader hear?
The section starts with an h2, and the three choices are a radio group named by the "Pause for" heading; arrow keys move between them. Each item in the "While paused" list is prefixed with hidden text, "Stays:" or "Paused:", so the check and the dash mean something without sight. The dates sit in time elements inside a description list, so each is read with its label.
Related
- Pro
Cancel Retention Billing
Upsell and retentionA cancel flow in three steps: a reason picker, an offer that matches it (half off for three months, or a pause), and a last page with the exact end date, each step taking focus and every outcome ending on a confirmation.
- Pro
Downgrade Confirmation Billing
Upgrade and downgradeA downgrade that shows what it costs first: the limits that shrink, the folders now over the smaller plan's storage with a checkbox to archive each and a live meter, the day it takes effect, and an alert dialog that asks for a typed word.
- Pro
Current Plan Billing
Plan and usageThe account's current plan in app settings: plan, price, renewal date and card, a change-plan action, every quota's usage this period on shared hairlines, and the next invoice.
- Pro
Upgrade Proration Billing
Upgrade and downgradeChanging plan inside app settings with the bill worked out first: pick a higher plan and the credit for unused days, the new plan's cost for those days, what's due today and the next invoice roll live, then an alert dialog confirms the charge.
- Pro
Payment Schedule Pricing
Billing switchesTuition paid once or in 3, 6 or 12 installments: four chips pick the schedule and a calendar of twelve monthly cells fills with the dated payments and their amounts, over the total and the call to action.
- Pro
Limit Reached Billing
Upsell and retentionThe upgrade prompt shown where someone hits a plan limit: what was blocked, the limit reached against the next plan's, a two-column comparison and Upgrade or Remind me later.