Loan Calculator

Interactive loan calculator for monthly payments and total interest.

Preview · Loan 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">Loan Calculator</h3>
  <div class="vstack">
    <div data-field><label>Loan Amount <input type="range" min="1000" max="500000" value="50000" /></label><span data-hint>$50,000</span></div>
    <div data-field><label>Interest Rate <input type="range" min="1" max="30" value="6" step="0.1" /></label><span data-hint>6.0% APR</span></div>
    <div data-field><label>Term <input type="range" min="12" max="360" value="60" step="12" /></label><span data-hint>60 months (5 years)</span></div>
    <div class="card stat" style="background:color-mix(in srgb,var(--primary) 8%,transparent)">
      <span class="card-label">Monthly Payment</span>
      <span class="card-value">$966.64</span>
    </div>
  </div>
</div>

React

import { PrimusLoanCalculator } from '@/components/ui/primus-loan-calculator';

<PrimusLoanCalculator
  minAmount={1000}
  maxAmount={100000}
  minTerm={6}
  maxTerm={60}
  interestRate={6}
  onApply={(data) => {
    console.log('Amount:', data.amount);
    console.log('Monthly EMI:', data.emi);
    console.log('Total interest:', data.totalInterest);
  }}
/>

Angular

<primus-loan-calculator [apiUrl]="'https://api.yourdomain.com'">
</primus-loan-calculator>

Props

Prop	Type	Default	Description
minAmount	number	1000	Minimum loan amount
maxAmount	number	100000	Maximum loan amount
minTerm	number	6	Minimum term in months
maxTerm	number	60	Maximum term in months
interestRate	number	12	Annual interest rate (%)
onApply	(data: { amount: number; term: number; emi: number; totalInterest: number }) => void	—	Called when the user clicks Apply

Version history

Props — full reference

Prop	Type	Default	Description
apiUrl	string	—	API base URL
minAmount	number	1000	Minimum loan amount
maxAmount	number	500000	Maximum loan amount
minTermMonths	number	12	Min term in months
maxTermMonths	number	360	Max term in months
onCalculate	(result: LoanResult) => void	—	Fires on calculation

interface LoanResult {
  principal:      number;
  rate:           number;
  termMonths:     number;
  monthlyPayment: number;
  totalInterest:  number;
  totalCost:      number;
}

Version history

See the Changelog for version history and breaking changes.