Pause Subscription
Offer a pause instead of a cancel: pick 1, 2 or 3 months, see the exact resume date and what keeps working meanwhile.
pause-subscription.tsxpause-subscription.css
Checking access…
Overview
Each option shows the date billing resumes. The summary spells out what stays (your data, your settings) and what stops (new projects, sync).
Confirming shows a paused state with a “Resume now” button and the date, so nobody is surprised by the next charge.
When to use
- Cancellation flows, account billing pages.
When not to use
- Plans that cannot actually pause on the backend.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/pause-subscription.json$
npx shadcn@latest add https://sundaeui.dev/r/pause-subscription.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/pause-subscription.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/pause-subscription.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 pause-subscription.tsx and pause-subscription.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 { PauseSubscription } from '@/components/sundae/pause-subscription'
<PauseSubscription />Props
| Prop | Type | Default |
|---|---|---|
planPlan name. | string | — |
pricePrice label. | string | — |
renews*Next renewal ISO date. | string | — |
onPauseConfirm callback. | (months: number) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Durations are a radiogroup; dates are written out in full.
- The result is announced and focus moves to Resume.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-pse; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Pause Subscription free?
- Pause Subscription is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Pause Subscription?
- Run npx shadcn@latest add https://sundaeui.dev/r/pause-subscription.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Pause Subscription support keyboard and screen readers?
- Durations are a radiogroup; dates are written out in full. The result is announced and focus moves to Resume.
- Does Pause Subscription respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Cancel Flow
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