Mortgage calculator

Pro

Monthly payment calculator with down payment slider, loan term toggle and an animated donut breakdown.

app/page.tsx

import { MortgageCalculator } from "@/components/facade/mortgage-calculator";

export default function Demo() {
  return (
    <div className="w-full max-w-[760px]">
      <MortgageCalculator
        defaultPrice={749000}
        defaultDownPercent={20}
        defaultRate={6.375}
        defaultTerm={30}
        propertyTaxRate={0.55}
        annualInsurance={1980}
        monthlyHoa={120}
        title="Estimate your payment for 1840 Vine St, Denver"
      />
    </div>
  );
}

Installation

$npx shadcn@latest add @facade/mortgage-calculator

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { MortgageCalculator } from "@/components/facade/mortgage-calculator";

export default function Page() {
  return <MortgageCalculator />;
}

Props

MortgageCalculatorProps is exported, so you can extend or wrap it. Every prop has a default; <MortgageCalculator /> renders the example above.

Props of MortgageCalculator
Prop	Type	Description
defaultPrice	number
defaultDownPercent	number	Down payment in percent (0 to 50).
defaultRate	number	Annual interest rate in percent.
defaultTerm	15 \| 30
propertyTaxRate	number	Annual property tax rate in percent of home price.
annualInsurance	number	Annual homeowners insurance in USD.
monthlyHoa	number	Monthly HOA dues in USD.
title	string
className	string
onChange	(result: MortgageBreakdown) => void

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade mortgage calculator to this page and adapt the copy to our business.