Cart Offer Modal React component
An add-to-cart modal with a mix-and-match deal: it confirms the item, shows how many more to add for the next discount tier on a progress track, lets shoppers add picks right in the modal with prices already discounted, and counts the savings and total as tiers unlock.
About the Cart Offer Modal component
Cart Offer Modal turns the 'added to cart' moment into a chance to save more. It confirms what was added, then shows exactly how many more items unlock the next discount and lets people add them without leaving the modal.
Prices on the suggested products already show the deal price, the track fills as tiers unlock, and the savings and total count up so the benefit is always clear.
When to use it
Use it for mix-and-match promotions, 'buy more, save more' campaigns, or bundle deals after add to cart.
For a first-visit offer use the Welcome Offer Modal; for a simple cart preview use the Cart Modal.
Installation
Add the Cart Offer Modal component to your project with the shadcn CLI. It lands in components/cart-offer-modal.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/cart-offer-modalOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<CartOfferModal /> accepts 8 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| added | object | ADDED |
| added.id* | string | — |
| added.title* | string | — |
| added.price* | number | — |
| added.image | string | — |
| picks | { id: string; title: string; price: number; image?: string }[] | PICKS |
| tiers | { items: number; percent: number }[] | TIERS |
| currency | string | "$" |
| onAdd | (id: string) => void | — |
| onCheckout | (value: { items: string[]; total: number }) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- addedobjectDefault: ADDED
- added.id*string
- added.title*string
- added.price*number
- added.imagestring
- picks{ id: string; title: string; price: number; image?: string }[]Default: PICKS
- tiers{ items: number; percent: number }[]Default: TIERS
- currencystringDefault: "$"
- onAdd(id: string) => void
- onCheckout(value: { items: string[]; total: number }) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Cart Offer Modal with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Cart Offer Modal FAQ
- How do tiers work?
- Each tier says how many items in total unlock a percent off everything. The highest tier reached applies; the next one drives the headline.
- Why do tiles show discounted prices before I add them?
- They show the price at the tier the cart would reach, so people see the deal value up front.
- How do I connect it to my cart?
- onAdd fires for each added pick and onCheckout receives the item ids and the discounted total. Apply the real discount on your server.
- Is there a countdown?
- No. The offer relies on a clear saving rather than fake urgency.
- Is it accessible?
- It's a labelled modal dialog with focus on Close, Escape and scrim to close, picks are toggle buttons with price labels, and the headline updates are announced.
