## Bundle Builder (S—313)

Build a bundle: pick items into numbered slots, the discount tier steps up as slots fill, and the saving is shown live.

- URL: https://sundaeui.dev/components/bundle-builder
- 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/bundle-builder.json`
- Tags: build-a-box, bundle, upsell, tiers, ecommerce, discount

Slots along the top fill in order as you tap products; tapping a filled slot empties it. Tiers (for example 2 for 10% off, 3 for 15%) are a progress line under the slots.
The total shows the bundle price against the separate price so the saving is concrete.

### Usage

```tsx
import { BundleBuilder } from '@/components/sundae/bundle-builder'

<BundleBuilder />
```

### Props

- `products` (`{ id: string; name: string; price: number }[]`, required): Choices.
- `tiers` (`{ count: number; off: number }[]`, required): Discount tiers.
- `slots` (`number`, default `4`): Bundle size.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Gift boxes, sample packs, mix-and-match offers.

### When not to use

- Fixed bundles: show a single product.

### Accessibility

- Products are toggle buttons with their price; slots are buttons that remove their item.
- The tier reached is announced.
- Reduced motion removes the movement and keeps every state change.