New Build Comparison Table

Realestate70: New Build Comparison Table

A two-column comparison table for a development's sales page: criteria rows (energy, warranty, chain, stamp duty, maintenance) with a title on the left and two cells on the right, one for the new build and one for older stock, each with a short note and a small check or dash glyph drawn stroke by stroke as the table scrolls into view. Hairlines separate the rows, column labels sit above, and a note and a register button close the block.

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

Base UI flavor

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

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

Quick start

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

import { Realestate70, realestate70Demo } from "@/components/beste/block/realestate70";

export default function Page() {
  return <Realestate70 {...realestate70Demo} />;
}

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

import { Realestate70 } from "@/components/beste/block/realestate70";

export default function Page() {
  return (
    <Realestate70
      eyebrow="New build versus older stock"
      heading="What a new home at Alder Row saves you"
      description="The same budget buys a different decade."
      rows={[
        { title: "Energy", newBuild: true, newBuildNote: "EPC A, heat pumps and solar, no gas", older: false, olderNote: "Typically EPC D or below" },
        { title: "Warranty", newBuild: true, newBuildNote: "10-year structural warranty", older: false, olderNote: "None; a survey at your own cost" },
        { title: "Chain", newBuild: true, newBuildNote: "No onward chain", older: false, olderNote: "Often dependent on other sales" },
      ]}
      labels={{ newBuild: "New build at Alder Row", older: "Older stock", yes: "Yes", no: "No" }}
      note="Contributions are subject to availability."
      button={{ label: "Register your interest", href: "/register" }}
    />
  );
}

Props

type Row = {
  title: string;
  newBuild: boolean;
  newBuildNote: string;
  older: boolean;
  olderNote: string;
};

type Labels = {
  newBuild?: string;
  older?: string;
  yes?: string;
  no?: string;
};

Behavior notes

• Each cell renders a 24 by 24 SVG with a single path: a check (stroke-foreground, width 2) for true or a dash (stroke-muted-foreground, width 1.5) for false, drawn from pathLength 0 to 1 over 0.9 seconds.
• Drawing is gated on the whole table being 10% inside the viewport, then each glyph starts 0.3 seconds after its row rises, the second column 0.15 seconds after the first; rows start 0.1 seconds apart with their hairlines.
• The glyph is a role="img" with labels.yes or labels.no as its accessible name, so screen readers hear the verdict before the note.
• Notes in a true cell use the foreground colour, notes in a false cell the muted colour, so the two columns read differently even before the glyphs draw.
• With prefers-reduced-motion glyphs render complete and no row, hairline or label animates.