shadcn.io is not affiliated with official shadcn/ui
Warranty Add-On Checkout Block for React
Extended cover for a power tool as three tiers priced as a share of the item in whole cents, each with a disclosure of what is covered and what is not, and a total that follows the choice.
Installation
Overview
Sell extended cover next to the item, with this warranty add-on for React with Base UI. A compact header from Foxgrove Tools, a seller of cordless power tools, sits over a hairline frame with a plus mark on each corner. The first band shows the item being bought, a drill driver at $289.00 with a drawn picture. Below it three tiers of cover are a radio group: no extra cover (chosen), two years at 10% of the item price and four years at 16%, with "Our pick" in words on the longer one. Each price is worked out in whole cents from the item, and each tier has its own "What is covered" disclosure (Collapsible) with a check row for everything in and a minus row for everything out, spoken as "covered" and "not covered". The summary adds the drill and the cover, and the total follows the choice. Continue to payment is the only Shine Button. For electronics, tools, appliances and anything bought with a guarantee on offer.
FAQ
How are the tier prices worked out?
Each tier holds a whole percent of the item price, and priceOf computes ITEM_PRICE * percent / 100 in cents ($289.00 gives $28.90 and $46.24). Change ITEM_PRICE or a tier's percent and every row, the summary and the total follow, so no figure is typed twice.
Where are the terms?
In each tier's disclosure, as short rows rather than a wall of text: what's covered and what isn't, each with an icon and a spoken "covered" or "not covered". A closed disclosure is inert, so its rows are out of the tab order. Replace TIERS with your real terms and link the full policy beside the group, because the rows are a summary, not a contract.
How does the group work with a keyboard?
The three rows are native radio buttons under one name, so Tab enters the group, the arrow keys move between tiers, and the choice changes as the focus moves. Each disclosure trigger is a separate stop, named for its tier ("What is covered, 4 years"). The chosen tier is tinted and shows a filled dot, not a colour alone.
Is Our pick a recommendation I should believe?
It's a typed flag (pick) that you set on whichever tier you want to lead with, shown as words in a secondary Badge. It's not computed from anything, so use it honestly and remove it if no tier deserves it.
What stays local, and how do I connect it for real?
The choice and the open disclosures live in the tab's state, and nothing is bought. To connect it, post the chosen tier with the item to your cart API, let the server price the cover, and show the server's total. The status line announces each change and "Payment comes next" at the end.