Skip to content
Pebble Pro is here at $49 one timeSee what’s included ↗
Pebble
ComponentsDocsMCPPricing
⌕ Find a component↗Log in
All components 673

Categories

Core inputs & forms46Buttons & actions33Navigation36Overlays & feedback49Data display33Charts & data viz40Cards & layout43Marketing blocks38App shells & pages37AI interfaces40Text & typography effects33Backgrounds & visual effects38Motion & transitions32Numbers & counters32Media34E-commerce333D & interactive36Themed sets40
Start with the essentials.Installation guide ↗Connect your agent ↗
← All componentsNumbers & counters

Loan calculator

Loan calculator with amount, rate and term sliders, a rolling monthly payment, principal-vs-interest bars by year, an amortisation excerpt and an extra-payment tip.

Preview

Loan amount$320,000
$10,000$1,000,000
Interest rate4.60%
0.00%12.00%
Term25 years
1 year35 years

Paying $200 more a month saves $41,840 in interest and finishes 4 y 2 mo early.

Monthly payment$10 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9,70 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 990 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 960 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9.80 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 980 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9
Principal
$320,000
Interest
$219,063
Total paid · interest is 41%
$539,063
Each yearHover a year
Amortisation by year
YearPrincipalInterestBalance
1$6,989$14,574$313,011
2$7,317$14,246$305,694
3$7,661$13,902$298,034
⋯
24$20,091$1,472$21,035
25$21,035$528$0

Install

Pro source requires Pebble Pro. Try the full preview above.

Props

PropTypeDefaultDescription
defaultAmountnumber320000Starting loan amount.
defaultRatenumber4.6Starting annual interest rate in percent.
defaultYearsnumber25Starting term in years.
amountRange[min, max, step][10000, 1000000, 5000]Amount slider range.
rateRange[min, max, step][0, 12, 0.05]Rate slider range.
yearsRange[min, max, step][1, 35, 1]Term slider range.
currencystring"USD"ISO currency code.
localestring"en-US"Formatting locale.
labelstring"Loan calculator"Accessible name.

Pro component

Try the full preview above. Editable source and build guides require Pebble Pro.

Buy Pebble Pro — $49How source access works ↗
Pebble

Small details.
Better interfaces.

React components to explore, make your own, and build on.

Library

  • Components
  • Installation
  • Pricing

Resources

  • For agents
  • About
  • Support

Legal

  • License
  • Terms
  • Privacy
  • Final sale

Built by Pebble

A product of Praxys Solutions LLC ↗

Pebble Pro is live

$49 one time, lifetime updates ↗