For insurers, brokers and agencies. A tariff calculator, what each tariff pays in real situations, claim reporting, products with a bundle discount and an advisor finder.
Marketing
Content
App
E-Commerce
Industries
Elements
Installv1.0.0
aiw add @ai-website/insuranceBrings along utils, kit, button, icon, reveal, section, motion, input, textarea, slider
Usage
<Insurance variant="tariff-calculator" tariffs={[{ id, name, base, features, recommended }]} sumRange={[20000, 150000]} sumBase={60000} addons={[{ id, label, price }]} />Source
What Insurance brings along, read from the registry and the source.
The InsuranceProps interface from components/ui/insurance.tsx, with the comments from the code.
variantoptionalInsuranceVarianttariff-calculatorscenariosclaimproductsadvisor
eyebrowoptionalReact.ReactNodetitleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodetariffsoptionalInsuranceTariff[]sumRangeoptional[number, number]tariff-calculator: the range of the sum insured and the reference sum the base prices belong to
sumBaseoptionalnumberaddonsoptional{ id: string; label: string; price: number }[]scenariosoptionalInsuranceScenario[]claimTypesoptional{ id: string; label: string; icon?: IconName }[]claim: kinds of damage
productsoptionalInsuranceProduct[]selectedoptionalstring[]products: ids picked at the start
bundleDiscountoptionalnumberproducts: percent off from three products
advisorsoptionalInsuranceAdvisor[]currencyoptionalstringonSubmitoptional(data: Record<string, string>) => voidInsurance writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.
| Key | English | German |
|---|---|---|
| sum | English Sum insured | German Versicherungssumme |
| deductible | English Excess | German Selbstbeteiligung |
| none | English None | German Keine |
| age | English Age | German Alter |
| years | English {n} years | German {n} Jahre |
| addons | English Add to every tariff | German Für jeden Tarif dazu |
| perMonth | English / month | German / Monat |
| recommended | English Recommended | German Empfohlen |
| choose | English Choose {name} | German {name} wählen |
| yearly | English Pay yearly and save 5% | German Jährlich zahlen und 5 % sparen |
| covered | English Covered | German Versichert |
| notCovered | English Not covered | German Nicht versichert |
| upTo | English up to {price} | German bis {price} |
| pick | English Pick a situation | German Situation wählen |
| tariffs | English Tariffs | German Tarife |
| step | English Step {n} of {total} | German Schritt {n} von {total} |
| what | English What happened? | German Was ist passiert? |
| when | English When did it happen? | German Wann ist es passiert? |
| describe | English Tell us briefly | German Erzählen Sie kurz |
| describeHint | English Where, how, and what is damaged. | German Wo, wie und was beschädigt ist. |
| photos | English Photos | German Fotos |
| photosHint | English Pictures of the damage help us pay faster. | German Bilder vom Schaden helfen uns, schneller zu zahlen. |
| policy | English Policy number | German Versicherungsnummer |
| iban | English IBAN for the payment | German IBAN für die Auszahlung |
| back | English Back | German Zurück |
| next | English Continue | German Weiter |
| submit | English Report the claim | German Schaden melden |
| required | English Please fill in this field. | German Bitte füllen Sie dieses Feld aus. |
| sent | English Claim {id} received | German Schaden {id} eingegangen |
| sentText | English Your case manager will be in touch within 24 hours. You can follow every step here. | German Ihre Sachbearbeiterin meldet sich innerhalb von 24 Stunden. Jeden Schritt können Sie hier verfolgen. |
| received | English Received | German Eingegangen |
| review | English In review | German In Prüfung |
| paid | English Paid | German Ausgezahlt |
| bundle | English Bundle discount | German Paketrabatt |
| bundleText | English {n}% off from three products | German {n} % Rabatt ab drei Versicherungen |
| total | English Together | German Zusammen |
| apply | English Continue to the application | German Weiter zum Antrag |
| selected | English {n} selected | German {n} gewählt |
| from | English from {price} | German ab {price} |
| find | English Find your advisor | German Berater finden |
| postcode | English Postcode | German Postleitzahl |
| search | English Search | German Suchen |
| noAdvisor | English No advisor near {code} yet. Our phone team helps you right away. | German In der Nähe von {code} gibt es noch keine Beratung. Unser Telefonteam hilft sofort. |
| nextFree | English Next free | German Nächster Termin |
| call | English Call | German Anrufen |
| book | English Book a meeting | German Termin buchen |
Read from the source of the component.
With aiw add @ai-website/insurance. The command puts components/ui/insurance.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, section, motion, input, textarea and slider. It needs no further npm packages.
5 variants, Tariff calculator, Real situations, Report a claim, Products and bundle and Advisor finder. You pick one with the variant prop, for example variant="scenarios".
Yes. Insurance carries 46 texts of its own in English and German, such as “Sum insured”, “Excess” and “None”. The language follows the KitProvider, single texts change through the labels prop.
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Insurance with aiw_components and install it with aiw_add @ai-website/insurance. Name the variant in your prompt, for example variant="tariff-calculator", and the assistant writes your content straight into the props.
Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Insurance code to copy.
More from Industries, the same area of the kit.
Sections that usually sit next to Insurance on a page.
Loading the source