shadcn.io is not affiliated with official shadcn/ui
Product Warranty Storefront Block for Radix UI
A warranty chooser for a laptop: a coverage table for 1, 2 and 3 year plans and a repair simulator that shows what you pay for a cracked screen, a dead battery or water damage under each plan.
Installation
Overview
Let shoppers compare protection plans by what a repair would cost them, with this warranty panel for React with Radix UI. A header names the Slate 14 from Grindstone. A hairline frame with a plus mark on each corner starts with a Segment Group for what breaks (cracked screen, dead battery or water damage) and the repair price without a plan. Under it a table lists five kinds of cover (accidental damage, battery, water damage, theft, loaner laptop) against the 1, 2 and 3 year plans, each cell in words: Covered or Not covered, with the excess when there is one. The plan heads are the radio group that picks a plan, with its price, and the chosen column is tinted. A last row, You pay, works out the failure you picked under each plan: the full repair when it is not covered, the excess (never more than the repair) when it is. The foot holds the one Shine Button, which adds the chosen plan in the page only. It's built from Segment Group, native radios in a table, Guides and Shine Button, with a CSS entrance only. For a laptop, phone or appliance page, a care-plan chooser or a repair-cost explainer.
FAQ
How do I fill it with my plans?
Edit PLANS, COVERS, CELLS and FAILURES. A cell says whether a plan covers a kind of cover and what the excess is in cents; a failure names the cover that applies and the repair price in cents. The "You pay" row is worked out from those, so changing an excess changes the row.
How is what I pay worked out?
If the plan does not cover the failure, you pay the whole repair price. If it does, you pay the excess, or the repair price when that is lower. The plan's own price is shown in its head and added on the button, not hidden inside "You pay".
What stays local, and how do I wire it to a real order?
Adding a plan only marks the button as done and says so in the status line. Nothing is added to a cart and nothing is charged. To wire it, replace the add handler with a call to your cart with the plan's id.
How does it look on a phone?
The table keeps its four columns and the cells wrap their words, so the plans stay side by side and the chosen column stays easy to follow. The Segment Group fills the width and the foot sticks to the bottom of the screen.
Is it accessible?
The plan heads are native radios in a named group, so the arrow keys move between plans. Every cell is words as well as a mark, never colour alone, and the table has a caption and row and column headings. The status line is a polite live region that speaks the result of each choice.