shadcn.io is not affiliated with official shadcn/ui
Cancellation Flow Settings Block for Svelte
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 Svelte with Ark 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.