Service Charge Breakdown

Realestate71: Service Charge Breakdown

A service charge breakdown for a development: a list of cost lines (concierge, building insurance, reserve fund, grounds, lifts) under one top hairline, in open rows without dividers, each with its yearly figure counting up, its share of the total and a horizontal bar proportional to the largest line that grows from the left in order. Beside the list a large total figure counts up, with a note on how the charge is set and a download button.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate71.tsx plus the Badge24 eyebrow and Button25 pill components and the shadcn/ui button primitive behind the download button.

Quick start

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

import { Realestate71, realestate71Demo } from "@/components/beste/block/realestate71";

export default function Page() {
  return <Realestate71 {...realestate71Demo} />;
}

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

import { Realestate71 } from "@/components/beste/block/realestate71";

export default function Page() {
  return (
    <Realestate71
      eyebrow="Service charge"
      heading="What the yearly charge pays for"
      description="Worked out for a Type A two bedroom of 78 m²."
      items={[
        { title: "Concierge", description: "A daytime concierge in the warehouse lobby", amount: 1180 },
        { title: "Building insurance", description: "Buildings cover for both blocks", amount: 690 },
        { title: "Grounds", description: "The courtyard, the birches and the river walk frontage", amount: 520 },
      ]}
      currency="USD"
      locale="en-US"
      labels={{ total: "Estimated total for a Type A home", perYear: "a year", share: "of the total" }}
      note="An estimate prepared by the managing agent for the first year."
      button={{ label: "Download the full estimate", href: "/documents/service-charge.pdf" }}
    />
  );
}

Props

type Item = {
  title: string;
  description: string;
  amount: number;
};

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

Behavior notes

• Each bar's width is the line's amount divided by the largest amount, so the biggest line spans the full column and the others sit in proportion; bars scale from the left over 1.4 seconds, 0.12 seconds apart, 0.2 seconds after their row. The bars themselves separate the rows, so there are no hairlines between items.
• Every figure counts up from zero with a 1.4 second spring once the list is 10% inside the viewport, starting together with its bar; the total starts after the last line and the figures are formatted with Intl.NumberFormat as currency with no decimals.
• The total and each line's share are computed from items, not passed in; shares use the locale's percent format with no decimals.
• The total column sits beside the list on desktop and below it on phones, its hairline drawing last and its note and button rising with the figure.
• With prefers-reduced-motion bars render at their full width, figures show their final values and nothing rises.