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 { PremiumCalculator } from 'primus-react-ui';

<PremiumCalculator apiUrl="https://api.yourdomain.com" />

Angular

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

Props

Prop	Type	Default	Description
apiUrl	string	—	API base URL

Props — full reference

Prop	Type	Default	Description
apiUrl	string	—	API base URL
title	string	'Premium Calculator'	Panel heading
minCoverage	number	50000	Minimum coverage
maxCoverage	number	1000000	Maximum coverage
onQuoteReady	(quote: PremiumQuote) => void	—	Estimate callback

interface PremiumQuote {
  coverageAmount: number;
  monthlyPremium: number;
  annualPremium:  number;
  coverageType:   string;
}

Version history

See the Changelog for version history and breaking changes.