shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let people take a premium apart before they ask for a quote with this insurance card for Svelte with Ark UI. A hairline frame holds a controls cell at the start and a side cell at the end. The controls are a Toggle Group for the deductible ($250, $500, $1,000) and a Slider for the cover ($50,000 to $250,000). The side cell shows the monthly price and a list of how it is built: a base amount, a cover charge, a deductible credit and a fee that add up to the figure, with one Shine Button beneath. Every line comes from one typed rating table in cents, so the lines always sum. It is an illustration, not a quote, and the card says so. For insurers, comparison sites and any product whose price is a sum of choices.
FAQ
How do I change the rates?
Edit the rating table at the top of the file: BASE_CENTS, FEE_CENTS, PER_10K_CENTS (the cover charge for each $10,000) and the creditCents of each entry in DEDUCTIBLES. All amounts are integer cents a month. The total is the sum of the four lines, so they always add up to the figure on the screen.
Is this a quote?
No, and the card says so. It is an illustration from a typed table. A real quote needs the person's address, history and your underwriting rules. The button only notes the estimate in the page; nothing is sent.
How is the slider announced?
It has a visible label, and its value text reads as dollars ("$100,000") rather than a bare number. Arrow keys move it by $10,000, and the status line says what the monthly price became after each change.
What stays local, and how do I wire it for real?
The two choices are page state and nothing is stored or sent. Replace the body of keep with a call to your quoting service, and replace the rating helpers with your own rater, keeping the breakdown lines it returns.
