## Back in Stock (S—249)

A product size picker where sold-out sizes offer “Notify me”: pick one, leave an email, and get a clear confirmation.

- URL: https://sundaeui.dev/components/back-in-stock
- 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/back-in-stock.json`
- Tags: back-in-stock, waitlist, product, ecommerce, notify-me, sizes

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.

### Usage

```tsx
import { BackInStock } from '@/components/sundae/back-in-stock'

<BackInStock />
```

### Props

- `sizes` (`{ id: string; stock: number }[]`, required): Sizes and stock.
- `onAdd` (`(size: string) => void`): Add to bag.
- `onNotify` (`(size: string, email: string) => void`): Waitlist signup.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Apparel, limited drops, restocks.

### When not to use

- Products that will never return: say discontinued.

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