Back in Stock
A product size picker where sold-out sizes offer “Notify me”: pick one, leave an email, and get a clear confirmation.
back-in-stock.tsxback-in-stock.css
Checking access…
Overview
Available sizes add to bag; sold-out sizes are still selectable and swap the button for a notify form with the size pre-filled.
Low stock shows “Only 2 left”. After signing up, that size is marked with a bell so you can see what you’re waiting for.
When to use
- Apparel, limited drops, restocks.
When not to use
- Products that will never return: say discontinued.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/back-in-stock.json$
npx shadcn@latest add https://sundaeui.dev/r/back-in-stock.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/back-in-stock.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/back-in-stock.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 back-in-stock.tsx and back-in-stock.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 { BackInStock } from '@/components/sundae/back-in-stock'
<BackInStock />Props
| Prop | Type | Default |
|---|---|---|
sizes*Sizes and stock. | { id: string; stock: number }[] | — |
onAddAdd to bag. | (size: string) => void | — |
onNotifyWaitlist signup. | (size: string, email: string) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Sizes are a radiogroup; sold-out ones say so in their label but stay focusable.
- The email field is labelled and validated; confirmation is announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-bis; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Back in Stock free?
- Back in Stock is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Back in Stock?
- Run npx shadcn@latest add https://sundaeui.dev/r/back-in-stock.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Back in Stock support keyboard and screen readers?
- Sizes are a radiogroup; sold-out ones say so in their label but stay focusable. The email field is labelled and validated; confirmation is announced.
- Does Back in Stock respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Gift Card
Checkout · Refined - Pro
Return Request
Checkout · Refined - Pro
Bundle Builder
Checkout · Refined - Pro
Subscribe & Save
Checkout · Refined - Pro
Tender Checkout
Checkout · Refined - Pro
Currency Swap
Checkout · Refined