Subscribe & Save
One-time or subscribe on a product page: delivery frequency, quantity, the per-delivery saving, and the next ship date.
subscribe-save.tsxsubscribe-save.css
Checking access…
Overview
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.
When to use
- Consumables: coffee, pet food, skincare, vitamins.
When not to use
- Products people rarely rebuy.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/subscribe-save.json$
npx shadcn@latest add https://sundaeui.dev/r/subscribe-save.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/subscribe-save.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/subscribe-save.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 subscribe-save.tsx and subscribe-save.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 { SubscribeSave } from '@/components/sundae/subscribe-save'
<SubscribeSave />Props
| Prop | Type | Default |
|---|---|---|
price*Unit price. | number | — |
discountSubscription discount percent. | number | 10 |
todayReference date. | Date | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Purchase type and frequency are radiogroups.
- Price changes are announced politely.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-sbs; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Subscribe & Save free?
- Subscribe & Save is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Subscribe & Save?
- Run npx shadcn@latest add https://sundaeui.dev/r/subscribe-save.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Subscribe & Save support keyboard and screen readers?
- Purchase type and frequency are radiogroups. Price changes are announced politely.
- Does Subscribe & Save respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Pause Subscription
Checkout · Refined - Pro
Cancel Flow
Checkout · Refined - Pro
Back in Stock
Checkout · Refined - Pro
Gift Card
Checkout · Refined - Pro
Return Request
Checkout · Refined - Pro
Bundle Builder
Checkout · Refined