Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when people build a bundle from a row of products: peeking cards with a checkbox each, a live subtotal that applies 10% off from three items, and Checkout locked until two are chosen.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for "build your own" sets (a gift box, a starter kit) where choosing several products earns a visible discount.
Do not use it for single purchases or when the discount rules are complicated: explain them in a table.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
products | BundleProduct[] | - | Each has an id, name, price in cents and an image node. |
label | string | - | Accessible name of the carousel. |
minimum | number | 2 | Items needed before Checkout is active. |
discountFrom | number | 3 | Number of items that earns the discount. |
discountRate | number | 0.1 | Share taken off the subtotal. |
onCheckout | (ids: string[], total: number) => void | - | Called by Checkout with the chosen ids and total in cents. |
The pattern ships with a Testing Library test (bundle-builder-peek.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.