Mortgage Calculator

Loan estimate card with a four-cell input grid for price, down, rate, term, and a bold monthly total.

Mortgage estimate

Home price$1,240,000

Down20% · $248,000

Rate6.25% APR · 30-yr fixed

Term30 years

Est. payment$6,108 / mo

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Realestate2 } from "@/components/beste/piece/realestate2";

<Realestate2
  price="$1,240,000"
  downPayment="20% · $248,000"
  rate="6.25% APR · 30-yr fixed"
  term="30 years"
  monthly="$6,108 / mo"
  tone="emerald"
  eyebrowLabel="Mortgage estimate"
  priceLabel="Home price"
  downLabel="Down"
  rateLabel="Rate"
  termLabel="Term"
  paymentLabel="Est. payment"
/>