shadcn.io is not affiliated with official shadcn/ui
Cancel Subscription Billing Block for React Aria
Cancel with the dates in view: access ends with the period or now with the unused days credited, a bar for the 30 days your data is kept, and a checklist whose export builds a real CSV, with the plan kept by one button.
Installation
Overview
Make cancelling clear instead of cornered, with this cancellation section for React with React Aria. A compact header names the plan. Inside a hairline frame with a plus mark on each corner, a Segment Group chooses to end access at the end of the period or now, and a bar draws the access that remains and the 30 days the data is kept after it, beside a Data List of the day access ends, the day data is deleted and any credit to the card. A side cell lists three sets to take along in Checkboxes, and an outline button builds one CSV from the ones ticked through a Download Trigger. The only Shine Button keeps the plan; scheduling the cancellation is a quiet outline button that turns into an undo. For subscription products that want honest, reversible cancellation.
FAQ
How do I fill it from my billing system?
The constants at the top hold the plan name and price in cents, the period start and end, the number of days data is kept, and the DATASETS with a count and sample rows. The credit for ending now is the price times the days left over the days in the period, rounded to the cent; the end and deletion dates are computed with UTC arithmetic from the chosen timing.
Why is Keep my plan the colored button?
The colored button should move the account somewhere safe. Cancelling is a quiet outline button, so a rushed press keeps the plan, while the decision to cancel stays one clear press away and can be undone from the same button. It never says "Cancel!", it says what happens, "Schedule cancellation for 12 Nov".
Is the export real?
Yes. The ticked sets are written to one CSV in the browser and saved by the Download Trigger as mossglade-export.csv; nothing is uploaded. Here each set holds a few sample rows, so replace csvOf with your real export or a link to a server-built file. With nothing ticked the button explains that instead of downloading an empty file.
What stays local?
Nothing is cancelled and no credit is issued. The status region says "Scheduled in this demo". In production, send the chosen timing to your billing system's cancel call (at period end or immediately with proration) and use the end date and credit it returns.