Bundle Builder
Build a bundle: pick items into numbered slots, the discount tier steps up as slots fill, and the saving is shown live.
bundle-builder.tsxbundle-builder.css
Checking access…
Overview
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.
When to use
- Gift boxes, sample packs, mix-and-match offers.
When not to use
- Fixed bundles: show a single product.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/bundle-builder.json$
npx shadcn@latest add https://sundaeui.dev/r/bundle-builder.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/bundle-builder.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/bundle-builder.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 bundle-builder.tsx and bundle-builder.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 { BundleBuilder } from '@/components/sundae/bundle-builder'
<BundleBuilder />Props
| Prop | Type | Default |
|---|---|---|
products*Choices. | { id: string; name: string; price: number }[] | — |
tiers*Discount tiers. | { count: number; off: number }[] | — |
slotsBundle size. | number | 4 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-bnd; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Bundle Builder free?
- Bundle Builder is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Bundle Builder?
- Run npx shadcn@latest add https://sundaeui.dev/r/bundle-builder.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Bundle Builder support keyboard and screen readers?
- Products are toggle buttons with their price; slots are buttons that remove their item. The tier reached is announced.
- Does Bundle Builder respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →Coupon Field
Checkout · Refined- Pro
Free Shipping Progress
Checkout · Refined - Pro
Back in Stock
Checkout · Refined - Pro
Gift Card
Checkout · Refined - Pro
Return Request
Checkout · Refined - Pro
Subscribe & Save
Checkout · Refined