shadcn.io is not affiliated with official shadcn/ui
Free Shipping Bar Checkout Block for React
A skincare shop's bag with a free-shipping meter that follows it: steppers on two lines, four add-one tiles that say which product alone reaches the $75 threshold, shipping that flips from $5.99 to Free, and a polite line that announces the crossing.
Installation
Overview
Show people how close they are to free delivery, with this free shipping bar for React with Base UI. A compact header from Cloudberry Co, a small skincare shop, sits over a hairline frame with a plus mark on each corner. The first band is a figure: a Progress meter against the $75.00 threshold, the subtotal beside it and one sentence worked out from the bag ("Add $17.80 more for free shipping."). Under it are the lines, each with a drawn thumbnail, a quantity stepper from 1 to 9 and a Remove that names its item, and a shelf of four "Add one of these" tiles: each says what it costs and, only when that one product alone would close the gap, "Reaches free shipping". The totals read Shipping $5.99 until the threshold and Free after it. A polite line in the foot announces each crossing in both directions, and Continue to payment, the only Shine Button, says what is missing when the bag is empty. Everything is worked out in whole cents. For carts, baskets and any checkout with a delivery threshold.
FAQ
What does the meter measure, and what is a threshold here?
The subtotal of the lines against THRESHOLD, a typed policy of 7500 cents. The bar's fill is the subtotal as a percentage, capped at 100, and the sentence under it is derived from the same number, so the two cannot disagree. Nothing is invented: there is no countdown, no stock claim and no discount, only a rule that the shop states. Shipping is SHIPPING (599 cents) under the threshold and nothing at or above it.
How does a tile know it reaches free shipping?
reachesOf compares the product's price with the gap left to the threshold: a tile says "Reaches free shipping" only when its price is at least the gap and the bag is not already over the line. With the sample bag the gap is $17.80, so the $19.00 serum and the $24.00 balm say it and the $6.50 lip balm and the $9.90 hand cream do not. The line is always laid out and hidden when it does not apply, so tiles never change height.
How is the crossing announced?
Every change goes through one polite status line. crossingOf compares the subtotal before and after: going over adds "Free shipping unlocked.", going back under says shipping is $5.99 again and how much more is needed. Changes that stay on one side say nothing extra, so the line is not noisy.
What does Add do if the product is already in the bag?
The tile's button stays in place and turns into "In your bag", marked aria-disabled so it keeps focus and still answers when pressed ("Use its stepper"). Each tile adds one unit; quantities change with the stepper on the line. Removing a line frees its tile again.
What happens on a phone?
The meter stays above the lines, each stepper drops under its product's name and the four tiles scroll sideways with snapping, the next one peeking in. The foot with Continue to payment stays pinned to the bottom of the screen.
What stays local in the demo, and how do I wire it up?
Everything: the bag, the shelf and the threshold are typed constants, and nothing is ordered or charged. In your app render the lines and the free-shipping rule your cart API returns, post stepper changes to it and let the response drive the meter, so a coupon or a regional threshold changes the bar without code in the component.