Rental Yield Estimator

Realestate81: Rental Yield Estimator

A rental yield estimator for a development's investor page: a tall photograph beside a purchase price field and two sliders for monthly rent and running costs as a share of rent. The gross yield is a large percentage figure that springs to each new value with the annual rent beside it, and net yield, annual rent and annual costs sit under hairlines with a sales button and a disclaimer.

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/realestate81?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/realestate81.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the sales button, and the shadcn/ui button, input and slider primitives behind them, the price field and the two sliders.

Quick start

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

import { Realestate81, realestate81Demo } from "@/components/beste/block/realestate81";

export default function Page() {
  return <Realestate81 {...realestate81Demo} />;
}

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

import { Realestate81 } from "@/components/beste/block/realestate81";

export default function Page() {
  return (
    <Realestate81
      eyebrow="For investors"
      heading="What a two bedroom at Alder Row could return"
      description="Set the price, the rent and the running costs. The yields update as you move the sliders."
      image={{
        src: "https://oud.pics/b/realestate/alder-warehouse-bedroom.webp",
        alt: "The main bedroom of a warehouse apartment, an oak bed against a brick wall",
      }}
      price={640000}
      rent={{ value: 2600, min: 1200, max: 6000, step: 50 }}
      costs={{ value: 20, min: 0, max: 45, step: 1 }}
      currency="USD"
      locale="en-US"
      labels={{
        price: "Purchase price",
        rent: "Monthly rent",
        perMonth: "a month",
        costs: "Running costs",
        ofRent: "of rent",
        gross: "Gross yield",
        net: "Net yield",
        annual: "Annual rent",
        annualCosts: "Annual costs",
        perYear: "a year",
      }}
      note="A guide only. Yields are before tax and mortgage costs."
      button={{ label: "Ask about letting", href: "/contact" }}
    />
  );
}

Props

type Range = { value: number; min: number; max: number; step: number };

type Labels = {
  price?: string;
  rent?: string;
  perMonth?: string;
  costs?: string;
  ofRent?: string;
  gross?: string;
  net?: string;
  annual?: string;
  annualCosts?: string;
  perYear?: string;
};

Behavior notes

• Gross yield is twelve months of rent divided by the purchase price; net yield deducts the running costs (the slider's percentage of annual rent) first. Both are formatted with Intl.NumberFormat as percentages to one decimal, and a price of zero shows zero rather than dividing by it.
• All four result figures (gross yield, net yield, annual rent, annual costs) 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.
• The price field accepts any typed characters and keeps only the digits, displaying the result with the locale's grouping separators; the rent slider shows its value as formatted currency a month, the costs slider as a percentage of rent.
• The result area (caption, big figure, the three breakdown figures, button and note) rises in as one group 0.5 s after the controls, with each breakdown hairline drawing 0.1 s apart.
• The photograph is gated on its own load event and on the frame being in view, opens from the top over 1.6 s once loaded and drifts from -6% to 6% against the scroll; on small screens it moves below the estimator.