Key Numbers Band

Realestate67: Key Numbers Band

A key numbers band for a development: a short heading above four figures (homes, a bedroom range, the starting price and the completion year) in two columns on tablets and four on desktop, each under its own hairline and never wrapping. The figures count up from zero in order once the row scrolls into view, ranges count both ends, and currency, plain and grouped number formats are chosen per figure.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate67.tsx plus the Badge24 eyebrow component it imports; no shadcn/ui primitives are needed.

Quick start

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

import { Realestate67, realestate67Demo } from "@/components/beste/block/realestate67";

export default function Page() {
  return <Realestate67 {...realestate67Demo} />;
}

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

import { Realestate67 } from "@/components/beste/block/realestate67";

export default function Page() {
  return (
    <Realestate67
      eyebrow="Alder Row in numbers"
      heading="A small riverside development, in four numbers"
      figures={[
        { label: "Homes", value: 24 },
        { label: "Bedrooms", value: 2, to: 4 },
        { label: "Prices from", value: 640000, format: "currency" },
      ]}
      currency="USD"
      locale="en-US"
      labels={{ to: "to" }}
    />
  );
}

Props

type Figure = {
  label: string;
  value: number;
  to?: number;
  prefix?: string;
  suffix?: string;
  format?: "number" | "currency" | "plain";
};

Behavior notes

• Every figure counts up from zero with a 1.4 second spring once the row is 10% inside the viewport; figures start 0.1 seconds apart, in order, together with their hairlines.
• A figure with to renders both ends of the range and counts them at the same time, with the labels.to word between them in the smaller muted style used for prefix and suffix.
• format picks the Intl.NumberFormat style: number groups thousands, currency adds the currency symbol with no decimals, and plain drops grouping so years read as 1872, not 1,872.
• With prefers-reduced-motion the figures render their final values at once and nothing rises or draws.
• The grid is two columns up to lg and four from lg, so figures never squeeze on tablets; each figure stays on one line (whitespace-nowrap), with its label under it and its hairline above.