shadcn.io is not affiliated with official shadcn/ui
Cancellation Flow Settings Block for React
A cancellation flow editor with a table of the reasons a member gives, an offer for each, arrows to reorder them and a drawn phone that shows what a member sees after the chosen reason.
Installation
Overview
Choose which offer follows each reason for leaving, and see it as a member would, with this cancellation flow editor for React with Base UI. Inside a hairline frame with a plus mark on each corner, a native table lists five reasons (too expensive, missing a feature, switching tools, not using it enough, and Other, which always stays last), each with a Native Select of five offers (no offer, 20% off for 3 months, pause 1 to 3 months, switch to a smaller box, talk to us) and a pair of arrow buttons to move it up or down. Choosing a reason selects its row and shows what a member sees after it on a drawn phone: the reason, the offer and its text, a take-the-offer button and a cancel-anyway link. Under the table an Input holds the chosen offer's text, which starts from the offer's own words and is limited to 80 characters; an offer with no text is refused on save. A status line counts unsaved changes and announces each move, beside a Shine Button to save them and an outline Button to discard them. On a phone the drawn phone comes first and each reason becomes a card. It's built from a native table, Native Select, Input, Button, Shine Button and Guides, with a CSS entrance only. For subscription boxes, SaaS billing settings and any product that tries to keep a member before it lets go.
FAQ
How do I change the reasons, the offers or the phone?
REASONS lists the reasons with a hint each, OFFERS the offers with the label and the starting text they wear, and SAVED holds the order and what each reason currently offers. The phone is the Phone component, drawn from the chosen row, so a new offer only needs an entry in OFFERS.
How does reordering work?
The arrows move a reason one place and the status line says where it went ("Moved Missing a feature up to 1 of 5."). Other is pinned last: its arrows are marked unavailable and nothing can move past it, and a refused move says why. Rows are drawn in fixed places, so focus stays on the arrow you pressed (or on the other arrow when the reason reaches an end of its range).
What happens to the text when I change an offer?
Choosing an offer replaces the text with that offer's starting words; typing then edits them for that reason only, and they are kept until you choose another offer. Choosing No offer clears the text and disables the field, and the phone shows a plain confirmation that the current box still arrives until its last day.
What stays local, and how do I wire it for real?
Everything: nobody cancels and no offer is made. Save keeps the flow in this page and says so. To make it real, store the order and the offers with the account, show the reasons in your cancel screen in that order, and apply the offer the member takes through your billing system.
How does it look on a phone, and how is it labelled?
The drawn phone sits above the table, the table becomes one card per reason with the reason, its offer select and its arrows, and the foot stays pinned to the bottom of the screen. Every select and arrow is named for its reason ("Offer after Too expensive", "Move Not using it enough down"), the chosen reason is marked as current, and the status line is a polite live region present from the start.
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
Cancel Subscription Dialog
Destructive confirmsA backup service's plan page with its exit flow shown open: an alert dialog in three steps, why you are leaving, an offer matched to the reason, and what ends and when, with a destructive final button and a thin progress bar.
- Pro
Pause Subscription Billing
Upsell and retentionPause 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.
- 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
Access Token Hygiene Settings
Sign-in and securityAn access token settings panel that flags risky tokens (no end date, unused for 90 days, the admin scope, ending soon), gives a token an end date from a menu, and revokes the ticked ones after an alert dialog lists them.
- Pro
Account Deletion Settings
Backups and exportsA whole-page account deletion that first asks what happens to each kind of data (delete, anonymise or transfer, with invoices locked for tax law), sums the choices in one sentence, then schedules deletion 14 days out behind a typed-email alert dialog.