Cancel flow
ProA cancellation flow that answers each reason with a tailored offer and a calm hold-to-cancel.
Team plan
Halcyon Studio · 8 seats · $96 a month
- Reason
- Offer
- Confirm
Why are you cancelling?
Your answer shapes what we suggest next. Nothing changes until you confirm on the last step.
- Subscription cancellation in billing settings with a reason step and a retention offer.
- Flows that offer a discount, pause, or downgrade before confirming the cancel.
- Use dialog with hold-to-confirm for a one step destructive action without offers.
- Use plan-comparison when people are choosing a plan rather than leaving.
- Use billing-overview for the billing page itself.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this in billing settings when someone cancels a subscription. Connect each offer's accept to your discount, pause or plan change API, the hold to your cancel endpoint, and the note to your feedback store; the preview simulates them.
import { CancelFlow } from "@/components/arc/blocks/cancel-flow/cancel-flow"; export default function CancelPage() { return ( <main> <CancelFlow /> </main> );}CancelFlow
A three step subscription cancellation (reason, tailored offer, confirm) that ends in a hold-to-cancel. Reasons, offers, price, resume dates and impacts are sample data in cancel-flow.tsx.
No props.
- Arrow keys
- Move between reason cards and select them (wraps around).
- HomeorEnd
- Select the first or last reason; on the pause offer, set the shortest or longest pause.
- UporDown, LeftorRight
- On the pause offer, change the pause length between one and three months.
- Reasons form a role="radiogroup" with aria-checked cards.
- The pause length is a role="spinbutton" whose aria-valuetext includes the resume date.
- A polite role="status" region announces offer changes and the outcome.
- Steps slide between reason, offer and confirm, the selection highlight glides with a layoutId, and prices roll with Animated counter.
- Reduced motion swaps slides for fades and figures change without rolling.
- Below a 520px container the reason cards drop to one column and the action buttons fill the width.
- The final hold works with mouse, touch, and keyboard through hold-to-confirm.
- Only the current step is mounted; prices roll with Animated counter.
- No observers or loops; the cost is a few spring transitions per step change.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use in billing settings when someone cancels a subscription.
- Connect each offer's accept to your discount, pause or plan change API, the hold to your cancel endpoint and the note to your feedback store; all are simulated.
- Edit REASONS, PRICE, RESUME and IMPACTS in cancel-flow.tsx to match your plans.
- Composes Arc Button, Badge, Avatar, Textarea, Animated counter and Hold to confirm.
The full library index for assistants is at /llms.txt.