Cart Modal React component
A product with a size picker whose Add to cart opens a centered cart modal: an Added to your cart header, line items with quantity steppers, complete-the-set add-ons, a discount code field, totals and checkout, with focus trap, Escape and click-outside to close.
About the Cart Modal component
Cart Modal confirms an add to cart with a centered window instead of a drawer: the shopper sees the line they just added highlighted, the rest of their cart, a couple of add-ons that go with it and the total, then either checks out or goes back to shopping.
Open it from the cart button and the header reads Your cart; open it from Add to cart and it reads Added to your cart with a green check. A discount code field applies codes you pass in and explains when a code doesn't qualify.
When to use it
Use it on product pages where an add is a moment worth confirming, especially with a natural add-on (socks with shoes, a case with a phone).
Prefer a mini cart or drawer on listing pages where people add many things in a row; a modal after every add slows them down.
Installation
Add the Cart Modal component to your project with the shadcn CLI. It lands in components/cart-modal.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/cart-modalOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Cart Modal with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Cart Modal FAQ
- How are add-ons handled?
- Products in crossSell show as Complete the set cards. Add puts them in the cart; once in, the button reads Added and adds another if pressed again.
- How do discount codes work?
- Pass codes as a map of code to { label, off(subtotal) }. Unknown codes say they aren't valid; codes that would take off nothing say the cart doesn't qualify yet. The applied code shows as a chip with a remove button, and onCheckout receives it.
- Does the modal leave the page?
- No. It's positioned inside the block, so in a real page you'd lift the modal part into a portal. The page behind becomes inert while it's open.
- What happens to focus?
- On open the close button gets focus, Tab and Shift+Tab cycle inside the dialog, Escape or a click on the scrim closes it, and focus goes back to the button that opened it.
- Can I hide the product part?
- The block shows the whole pattern. To use only the modal, keep the dialog markup and open it from your own Add to cart handler with the line you added.
