## Pause Subscription (S—236)

Offer a pause instead of a cancel: pick 1, 2 or 3 months, see the exact resume date and what keeps working meanwhile.

- URL: https://sundaeui.dev/components/pause-subscription
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/pause-subscription.json`
- Tags: pause, subscription, churn, retention, billing, account

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.

### Usage

```tsx
import { PauseSubscription } from '@/components/sundae/pause-subscription'

<PauseSubscription />
```

### Props

- `plan` (`string`): Plan name.
- `price` (`string`): Price label.
- `renews` (`string`, required): Next renewal ISO date.
- `onPause` (`(months: number) => void`): Confirm callback.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Cancellation flows, account billing pages.

### When not to use

- Plans that cannot actually pause on the backend.

### 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.