Cancel flowPro
A 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { CancelFlow } from 'animui/cancel-flow';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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 animui Button, Badge, Avatar, Textarea, Animated counter and Hold to confirm.
The full library index for assistants is at /llms.txt.