shadcn.io is not affiliated with official shadcn/ui
Shipping Insurance Checkout Block for React Aria
A switch that insures the parcel, priced from a four-row bracket table by the value of the box, with the applying row marked, a drawn parcel, what is and is not covered, and how a claim works.
Installation
Overview
Offer to cover a parcel in transit, with this shipping insurance for React with React Aria. A compact header from Underhill Pottery, a studio selling handmade ceramics, sits over a hairline frame with a plus mark on each corner. The first cell holds the box (a set of four bowls and a stepper from 1 to 9), a Switch to cover this shipment (off to begin with) and the premium table: four rows, up to $50, up to $150, up to $500 and above that 1.2% of the value, with the row that applies to this box marked, so changing the quantity visibly moves the price along the table. Beside it a drawn parcel, a list of what cover pays for (lost, damaged, stolen) and one line of what it doesn't (delays, a wrong address), and a Collapsible of how a claim works in three steps. A summary adds goods, shipping and cover in whole cents. Continue to payment is the only Shine Button. For fragile goods, high-value orders and any shop that insures by value.
FAQ
How is the premium worked out?
From BRACKETS, a typed table: a box worth up to $50.00 costs $1.20, up to $150.00 costs $2.40, up to $500.00 costs $4.90, and above that the premium is 1.2% of the value, rounded to the nearest cent in integers (value * 12 / 1000). Everything is whole cents; change a bracket in the table and the rows, the switch hint and the total all follow.
How do I see the brackets work?
Use the stepper above the switch. Three sets at $62.00 each is a $186.00 box, in the "up to $500.00" bracket at $4.90; one or two sets fall in the "up to $150.00" bracket; nine sets are $558.00 and cross into the percentage row at $6.70. The status line says the new value and what cover would cost, and the applying row is marked with "This box" and a tint.
Why is the switch off to begin with?
Cover is an extra charge, so it's a choice the buyer makes, never a default. The summary shows "Not added" until it's on, and the total follows in both directions. Each change is announced in the page's one polite status line.
Are the claim terms real?
They're typed copy for a fictional shop (14 days to photograph, five working days to refund). Replace CLAIM_STEPS, COVERED and NOT_COVERED with your insurer's actual terms, and link the full policy next to the switch. Nothing here is bought or sent.
What stays local, and how do I connect it for real?
The quantity, the switch and the totals live in the tab's state, and Continue to payment only says that payment comes next. To connect it, send the box value and the cover flag to your server, let it price the premium from your insurer's rates (never trust a client's figure), and return the new total to show.