## Subscribe & Save (S—314)

One-time or subscribe on a product page: delivery frequency, quantity, the per-delivery saving, and the next ship date.

- URL: https://sundaeui.dev/components/subscribe-save
- 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/subscribe-save.json`
- Tags: pdp, subscription, frequency, subscribe-and-save, recurring, ecommerce

Two cards choose one-time or subscription. Subscription reveals a frequency chooser and states the discount per delivery and per year.
The next delivery date follows from today and the frequency; skip or cancel any time is said plainly.

### Usage

```tsx
import { SubscribeSave } from '@/components/sundae/subscribe-save'

<SubscribeSave />
```

### Props

- `price` (`number`, required): Unit price.
- `discount` (`number`, default `10`): Subscription discount percent.
- `today` (`Date`): Reference date.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Consumables: coffee, pet food, skincare, vitamins.

### When not to use

- Products people rarely rebuy.

### Accessibility

- Purchase type and frequency are radiogroups.
- Price changes are announced politely.
- Reduced motion removes the movement and keeps every state change.