Back-in-Stock Notify React component
A product buy box where picking a sold-out size swaps Add to cart for a restock alert: expected date and people waiting, an Email or Text message switch, validation, a half-size-either-side option and a ringing-bell confirmation, with alert badges on sizes and removable alert chips.
About the Back-in-Stock Notify component
Back-in-Stock Notify keeps a sold-out size from being a dead end. When a shopper picks a size that is gone, the Add to cart button turns into a short form that collects an email or phone number for a restock alert.
It shows when the size is expected back and how many people are waiting, which sets expectations and signals demand. After signing up, the shopper sees a clear confirmation, neighbouring sizes that are in stock and a list of their alerts.
When to use it
Use it on product pages where variants sell out and restock, such as shoes, clothing and limited runs, so you can win back the sale when stock arrives.
If a product is discontinued and will not come back, say so plainly and suggest alternatives instead of collecting alerts you can't fulfil.
Installation
Add the Back-in-Stock Notify component to your project with the shadcn CLI. It lands in components/back-in-stock-notify.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/back-in-stock-notifyOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Back-in-Stock Notify with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Back-in-Stock Notify FAQ
- What does onSubscribe receive?
- An alert with the size, the channel (email or sms), the contact entered and whether the shopper also wants to hear about a half size either side. If it returns a promise, the button keeps its saving state until it resolves.
- Can I hide the waiting count or date?
- Yes. Leave out restock or waiting for a size and the line falls back to No restock date yet or simply omits the count.
- Do I need to support text messages?
- No. If you only send emails, remove the sms option from the switch; the form then only shows the email field. Keep the no-marketing note so people feel safe leaving their details.
- What happens when a shopper sets several alerts?
- Each size keeps its own alert. Sizes with an alert get a small bell badge, and the Your alerts chips list them all with a button to cancel each one.
- Is it accessible?
- Sizes are a radiogroup whose labels say when a size is sold out or has an alert, the contact field has a label and linked error message, focus moves to it on an invalid submit and the confirmation is announced as a status.
