Cancel Subscription Dialog
A cancel subscription dialog with a reason radio list, a pause offer panel, a period end access note, and a keep plan primary action.
A cancel subscription dialog with a reason radio list, a pause offer panel, a period end access note, and a keep plan primary action.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Cancel Subscription Dialog is the static blueprint for the retention moment, rendered open over a scrim for the Growth plan. The heading names the exact plan and the subtext states the paid through date of Aug 2, 2026. A radio list captures the main reason for cancelling, with four choices each carrying a short detail line and the first one preselected, followed by an optional note that routes to the roadmap team. A bordered panel offers the pause for 3 months path as the middle option, and a muted callout spells out what happens at period end: full access until the date, then a read only workspace and 90 days of data retention.
The reasons are one typed array and the whole dialog is static markup with no Radix portal opened, so the scrim renders correctly inside the preview iframe. The footer puts Keep my plan as the primary action beside a quieter Cancel at period end, letting the copy do the retention work rather than a hard block.
Reach for this block as the cancellation flow inside a billing settings page, not a generic goodbye screen. Wire the radio group to a reason field, post the optional note with it, and send the two footer actions to your pause and cancel endpoints so the plan stays active until the period ends.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a paid plan cancellation with a pause offer. Other churn moments:
Tip: name the period end date in the callout, the concrete access window softens the click far more than a plea to stay.