Bundle Builder
Pick-N bundle builder with numbered slots, a tiered discount progress bar, a rolling discounted total and an add-bundle CTA over a catalogue of drawn items.
Preview
Pantry gift box: pick 3
2 of 3 picked- Morning roast
- Wildflower honey
- 3Empty
Add 1 more for 20% off2 items · 10%3 items · 20%
Bundle totalwas $30.00
- Morning roast$16.00 · 250 g
- Smoked black tea$12.00 · 100 g
- Wildflower honey$14.00 · 340 g
- Maple syrup$18.00 · 250 ml
- Drinking cocoa$11.00 · 200 g
- Masala chai$13.00 · 100 g
- Fig preserve$10.00 · 220 g
- Chili oil$15.00 · 150 ml
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id; name; price; thumb; detail? }[] | — | Catalogue to pick from, with drawn thumbnails. |
| size | number | 3 | Number of bundle slots. |
| tiers | { count; percent }[] | 2 → 10%, 3 → 20% | Discounts unlocked by item count; shown on the progress bar. |
| value / defaultValue / onValueChange | string[] | [] | Picked ids in slot order, controlled or not. |
| requireFull | boolean | true | Only enable the CTA once every slot is filled. |
| onAdd | (ids: string[], total: number) => void | — | Add the bundle with its discounted total. |
| title / currency / locale | string | "Build your bundle" / "USD" / "en-US" | Heading and money formatting. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.