shadcn.io is not affiliated with official shadcn/ui
Upsell Cross-Sell Checkout Block for Radix UI
A commuter kit sold as five pieces: a strip of drawn cells with the ones in your cart ticked and the others open with an Add, a meter, a total worked out in cents and a typed rule that takes 10% off the pieces you add once four of five are in.
Installation
Overview
Help people finish a set instead of nagging them with a list, with this cross-sell for React with Radix UI. A compact header from Dunmore Bikes, a city-bike shop, sits over a hairline frame with a plus mark on each corner. The Commuter kit is five typed pieces (the bike, a lock, lights, mudguards and a bell) laid out as a strip of cells with a drawn picture each. The ones already in the cart are ticked and say so; the others are open cells with an Add Button. Adding a piece fills its cell, moves the "2 of 5 pieces" Progress meter and re-works the total, and the same button becomes an Undo. The rule is stated in words and is real: with four of the five in the cart, the pieces you added take 10% off, worked out in whole cents. A short list shows what was already in the cart, what you added, the discount (or "Not yet") and the total, which counts up and down (Counting Number). The foot has a polite status line and Continue to shipping, the only Shine Button. On a phone the strip scrolls sideways. For bikes, cameras, kitchens and any product that is really a set.
FAQ
Exactly how is the set discount worked out?
Once the cart holds NEEDED pieces of the kit (four), PERCENT (10) percent comes off the price of the pieces you added, not off the ones that were already in the cart. It is rounded half up to the cent: ten percent of $63.00 is $6.30, and ten percent of $54.00 is $5.40. Undo a piece and the count falls below four, the discount goes to "Not yet" and the total moves back; the status line says when the discount starts to apply.
How do I describe my own set?
Edit PIECES at the top of the file. Each piece has an id, a name, a price in whole cents, a glyph that picks its drawing and a start flag for the ones already in the cart. NEEDED and PERCENT hold the rule, and the meter, the count, the totals and the rule sentence are all derived from them. Replace Thumb with your product pictures and keep the name in text beside them.
How does Undo work, and what happens to focus?
Add and Undo are one button whose label and name change ("Add D-lock", "Undo adding D-lock"), so it keeps keyboard focus and sits in the same place. Pieces that were in the cart from the start have no button; they show a tick and "In your cart". Open cells and filled cells have the same height, so nothing moves when you add or undo.
How does the strip look on a phone?
The five cells keep a fixed width and the strip scrolls sideways with snap points, so the next cell shows at the edge. Each cell is reachable with Tab through its button. From the medium breakpoint the strip is five equal columns on shared hairlines.
Why are prices in cents?
Floating-point dollars drift (0.1 + 0.2), so every price is an integer number of cents and usd is the only place that turns cents into text. The discount, the sums and the total are all computed from the pieces, and no figure is typed twice.
What stays local in the demo, and how do I wire it up?
Everything. The cart lives in the block's state and Continue to shipping only says that shipping comes next; nothing is ordered. In your app, make Add and Undo calls to your cart API, take the discount from the same response so the page and the charge agree, show a failure in the status line, and make Continue to shipping a link to your next step: wrap an a element in the Shine Button with asChild.