Stamp Duty Calculator

Realestate82: Stamp Duty Calculator

A stamp duty calculator for a development's buying page: a purchase price field and a first-time buyer checkbox on the left above the total tax as a large figure that springs to each new value with the effective rate, a button and a disclaimer. On the right a configurable band table (threshold and rate) lists the tax per band on hairline rows, the active bands in full colour, and the whole table cross-fades when the checkbox swaps in the first-time buyer bands.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/realestate82?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate82?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate82.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the button, and the shadcn/ui button, checkbox and input primitives behind them, the first-time buyer box and the price field.

Quick start

The installed file exports realestate82Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Realestate82, realestate82Demo } from "@/components/beste/block/realestate82";

export default function Page() {
  return <Realestate82 {...realestate82Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Realestate82 } from "@/components/beste/block/realestate82";

export default function Page() {
  return (
    <Realestate82
      eyebrow="Buying costs"
      heading="Stamp duty on a home at Alder Row"
      description="Type the price of the home you have in mind. The tax is worked out band by band."
      price={895000}
      bands={[
        { upTo: 250000, rate: 0 },
        { upTo: 925000, rate: 5 },
        { rate: 10 },
      ]}
      firstTimeBands={[
        { upTo: 425000, rate: 0 },
        { upTo: 925000, rate: 5 },
        { rate: 10 },
      ]}
      currency="USD"
      locale="en-US"
      labels={{
        price: "Purchase price",
        firstTimeBuyer: "I am a first-time buyer",
        band: "Band",
        rate: "Rate",
        tax: "Tax",
        upTo: "Up to",
        to: "to",
        above: "Above",
        total: "Stamp duty due",
        effective: "Effective rate",
        ofPrice: "of the price",
      }}
      note="Standard residential rates for a main home, as a guide only."
      button={{ label: "Ask about buying costs", href: "/contact" }}
    />
  );
}

Props

type Band = {
  upTo?: number;
  rate: number;
};

type Labels = {
  price?: string;
  firstTimeBuyer?: string;
  band?: string;
  rate?: string;
  tax?: string;
  upTo?: string;
  to?: string;
  above?: string;
  total?: string;
  effective?: string;
  ofPrice?: string;
};

Behavior notes

• The tax is computed band by band: for each band the taxable portion is the part of the price between the previous threshold and this band's upTo (clamped at zero), times the rate; the total is the sum and the effective rate is the total divided by the price.
• Band wording is built from the labels and the thresholds: the first band reads Up to its ceiling, middle bands read from one unit above the previous ceiling to their own, and a band without upTo reads Above the previous ceiling.
• The total, the effective rate and every per-band tax are driven by springs (stiffness 90, damping 22, mass 0.8) so they count towards each new value; with prefers-reduced-motion they show the exact value at once.
• Ticking the first-time buyer box swaps the band set; the table is keyed on the active set inside AnimatePresence with mode="wait", so the old rows fade out over 0.2 s before the new rows fade in and their hairlines redraw. Bands with no taxable portion at the current price are shown in muted text.
• The price field accepts any typed characters and keeps only the digits, displaying the result with the locale's grouping separators; all currency figures are formatted with Intl.NumberFormat and no decimals.