Staged Payment Schedule Bar

Realestate39: Staged Payment Schedule Bar

A payment schedule for an off-plan development: a price field, then a stacked proportional bar whose segments (10% on exchange, 10% at structure complete, 80% on completion) grow one after another, each labelled below under a hairline with its share, a spring figure for the typed price, a title and a line. A total figure, a button to the payment estimator and a note close the section.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate39.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the estimator button, and the shadcn/ui button and input primitives behind it and the price field.

Quick start

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

import { Realestate39, realestate39Demo } from "@/components/beste/block/realestate39";

export default function Page() {
  return <Realestate39 {...realestate39Demo} />;
}

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

import { Realestate39 } from "@/components/beste/block/realestate39";

export default function Page() {
  return (
    <Realestate39
      eyebrow="When you pay what"
      heading="Three payments, most of it at the very end"
      description="Type a home price to see each stage worked out for that home."
      price={640000}
      currency="USD"
      locale="en-US"
      stages={[
        { title: "On exchange", share: 10, description: "Paid within 28 days of reservation." },
        { title: "At structure complete", share: 10, description: "Due when the frame tops out in autumn 2026." },
        { title: "On completion", share: 80, description: "The balance, paid on legal completion in spring 2027." },
      ]}
      labels={{ price: "Home price", total: "Total paid", share: "of the price" }}
      note="Figures exclude legal fees, stamp duty and the service charge."
      button={{ label: "Estimate the monthly payment", href: "/estimator" }}
    />
  );
}

Props

type Stage = {
  title: string;
  share: number;
  description: string;
};

type Labels = {
  price?: string;
  total?: string;
  share?: string;
};

Behavior notes

• Each stage amount is the price times its share, rounded to a whole unit, and the total is the sum of those amounts; segment widths are each share over the sum of all shares, so stages that do not add up to 100 still fill the bar.
• The bar grows segment by segment: every segment scales from the left over 0.9 s, 0.35 s after the one before it, and the stage labels under it rise on the same offsets with their hairlines.
• Every figure is driven by a spring (stiffness 90, damping 22) so retyping the price makes the amounts count towards the new values; with prefers-reduced-motion they show exact values at once.
• The price field keeps only the digits typed and displays them with the locale's grouping separators; all currency figures are formatted with Intl.NumberFormat and no decimals.
• The three segments step from a light to a full foreground tint so completion, the largest payment, reads darkest; the same dots repeat in the stage labels.