shadcn.io is not affiliated with official shadcn/ui
Shipping Options Checkout Block for React
Four lamps with what they are in words and an Include checkbox beside four delivery methods that show an arrival date or the exact reason they are out and which lamp causes it, a shipping line and total that follow the choice, and Continue to payment.
Installation
Overview
Tell shoppers which delivery methods their cart allows and why, with these shipping options for React with Base UI. A compact header from Umberleigh, a table lamp shop, holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, two cells sit on a divider. The first lists four lamps, each with a drawn thumbnail, its price, what it is in words (Badge chips such as Oversize, Over 20 kg, Fragile and Contains a battery) and an Include checkbox. The second lists four methods as radio rows: Standard, Express, Overnight and Collect. A method that works reads its arrival date, counted in weekdays from a fixed date; one that does not reads its exact reason with the lamp that causes it ("Express: not for oversize items (Arc floor lamp)") and cannot be picked. Taking the blocking lamp out makes the method available at once, a polite line says what became available or was lost, and if your choice is no longer possible it moves to Standard and says so. Below, the lamps, the shipping line and the total follow the choice in whole cents. Continue to payment, with the total in its label, is the only Shine Button. It's built from Badge, Shine Button and Guides, with native radios and checkboxes and a CSS entrance only. For catalogues with oversize, fragile or restricted goods.
FAQ
How do I change what rules a method out?
Edit METHODS at the top. Each method has a price in cents, the weekdays it takes, the list of attributes that block it (blockedBy) and the sentence for because. Each lamp has an attrs list from the same set (oversize, heavy, fragile, battery). Availability is one helper over the included lamps, so a new attribute or method needs no other change.
Why show an unavailable method instead of hiding it?
A shopper who sees only Standard wonders why Express is missing. Here every method stays in its row with the reason in text and a lock, the name of the lamp that causes it, and a screen reader hears "not available". The radio is disabled, so it cannot be chosen, and the reason is readable without hovering.
What happens when I untick a lamp?
The order, the methods and the total re-derive at once. The status line says what changed in words ("Arc floor lamp is out of the order. Now available: Express, Collect."), and if the method you had chosen is no longer possible, the choice moves to Standard and the line says that too. With every lamp out, the methods all read "Include a lamp to see this" and Continue to payment says so when pressed.
How are the arrival dates worked out?
From a fixed date in the file (AS_OF) by counting weekdays, skipping Saturday and Sunday, so the same dates show on every load and in every time zone. In your app pass the order date and your carrier's cut-off, and replace the weekday counts with the dates your carrier API returns.
How does it look on a phone?
The two cells stack, the lamps first and the methods after a rule, with the totals under the methods. The Include checkbox sits under each lamp's chips and the foot is pinned to the bottom of the screen while you scroll, settling at the end of the panel from the medium breakpoint.
What stays local, and how do I wire it up?
Everything: nothing is booked and Continue to payment only says that payment comes next. In your app keep the order in your cart store, read the methods and their restrictions from your shipping service, and make Continue a link to the payment step carrying the chosen method.