Premium Calculator

Interactive insurance premium calculator with real-time estimates.

Preview · Premium Calculator

Code

HTML · @primus/ui-core

<div class="card" style="max-width:340px;padding:1.25rem">
  <h3 style="margin:0 0 1rem;font-size:0.975rem">Premium Calculator</h3>
  <div class="vstack">
    <label>Coverage Amount <input type="range" min="50000" max="1000000" value="250000" /></label>
    <label>Age <input type="number" min="18" max="80" value="35" style="max-width:100px" /></label>
    <div class="card stat" style="background:color-mix(in srgb,var(--primary) 8%,transparent)">
      <span class="card-label">Estimated Monthly Premium</span>
      <span class="card-value">$142.50</span>
    </div>
    <button>Get Full Quote</button>
  </div>
</div>

React

import { PrimusPremiumCalculator } from '@/components/ui/primus-premium-calculator';

<PrimusPremiumCalculator
  insuranceType="auto"
  basePremium={50}
  currency="USD"
  onGetQuote={(data) => console.log('Quote', data)}
/>

Angular

<primus-premium-calculator title="Premium Calculator">
</primus-premium-calculator>

Props

Prop	Type	Default	Description
insuranceType	'auto' | 'home' | 'life' | 'health'	required	Sets available coverage options and add-ons
basePremium	number	50	Starting premium before adjustments
currency	string	'USD'	Currency for display
onGetQuote	(data: { premium: number; options: Record<string, any> }) => void	—	Called when "Get Quote" is clicked

Version history

See the Changelog for version history and breaking changes.