Cancel Flow
An honest cancellation flow: ask why, offer one relevant alternative for that reason, then confirm with the end date.
cancel-flow.tsxcancel-flow.css
Checking access…
Overview
Step one asks for a reason. Step two shows a single matching offer (too expensive → discount, not using it → pause, missing feature → roadmap) with a clear “No thanks, cancel”.
The final step states exactly when access ends. No dark patterns: cancel is always one tap away.
When to use
- Subscription settings, account deletion.
When not to use
- Free accounts: just confirm.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/cancel-flow.json$
npx shadcn@latest add https://sundaeui.dev/r/cancel-flow.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/cancel-flow.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/cancel-flow.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy cancel-flow.tsx and cancel-flow.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { CancelFlow } from '@/components/sundae/cancel-flow'
<CancelFlow />Props
| Prop | Type | Default |
|---|---|---|
endDate*Access end date. | string | — |
onCancelConfirmed. | (reason: string, note?: string) => void | — |
onAcceptOffer taken. | (offer: string) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each step has a heading and focus moves to it.
- Reasons are a radiogroup; the note field is optional and labelled.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-cnf; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Cancel Flow free?
- Cancel Flow is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Cancel Flow?
- Run npx shadcn@latest add https://sundaeui.dev/r/cancel-flow.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Cancel Flow support keyboard and screen readers?
- Each step has a heading and focus moves to it. Reasons are a radiogroup; the note field is optional and labelled.
- Does Cancel Flow respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Pause Subscription
Checkout · Refined - Pro
Billing Toggle
Checkout · Refined - Pro
Payment Methods
Checkout · Refined - Pro
Trial Countdown
Checkout · Refined - Pro
Subscribe & Save
Checkout · Refined - Pro
Tender Checkout
Checkout · Refined