Compare
Pick any two of the five types and read them against each other. The figures are typical for the type; each home differs a little in floor and aspect.
Pick two types to compare
A comparison table for a development: five type pills of which two are always selected, and under them a typographic spec table (interior, outside, bedrooms, bathrooms, floors, aspect, parking, from) with hairline rows whose two value columns cross-fade whenever another type is picked; the newest pick replaces the older of the two, and an enquiry button closes the table.
A comparison table for a development's sales page: a row of type pills of which two are always selected, and under them a typographic spec table (interior, outside, bedrooms, bathrooms, floors, aspect, parking, from) with hairline rows. The two value columns cross-fade whenever another type is picked, the newest pick replacing the older of the two, and an enquiry button closes the table under a final hairline.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/realestate33?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/realestate33?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/realestate33.tsx plus the badge24 eyebrow, the button25 pill and the shadcn/ui button primitive behind it.
The installed file exports realestate33Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Realestate33, realestate33Demo } from "@/components/beste/block/realestate33";
export default function Page() {
return <Realestate33 {...realestate33Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Realestate33 } from "@/components/beste/block/realestate33";
export default function Page() {
return (
<Realestate33
eyebrow="Compare"
heading="Two types, side by side"
description="Pick any two of the types and read them against each other."
types={[
{ name: "Type A", title: "Two bedroom", specs: { area: "78 m²", outside: "9 m² balcony", beds: "2", baths: "1", floor: "Ground to 3", aspect: "Courtyard or river", parking: "Cycle store", from: "$640,000" } },
{ name: "Type C", title: "Three bedroom", specs: { area: "112 m²", outside: "14 m² terrace", beds: "3", baths: "2", floor: "1 to 2", aspect: "River, south", parking: "1 space", from: "$895,000" } },
{ name: "Type E", title: "Penthouse", specs: { area: "146 m²", outside: "62 m² roof terrace", beds: "2", baths: "2", floor: "4", aspect: "River, all round", parking: "2 spaces", from: "$1,650,000" } },
]}
selected={[0, 2]}
labels={{ pick: "Pick two types to compare", area: "Interior", outside: "Outside", beds: "Bedrooms", baths: "Bathrooms", floor: "Floors", aspect: "Aspect", parking: "Parking", from: "From" }}
button={{ label: "Enquire about these types", href: "/enquire" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Short line above the heading, drawn with a rule in front of it. |
heading | string | – | Section heading. |
description | string | – | Intro paragraph beside the heading. |
types | HomeType[] | [] | The types offered as pills; every one needs the full set of specs. |
selected | [number, number] | – | Indexes of the two types shown on load; the first two types when omitted. |
labels | Labels | {} | The instruction above the pills and the caption for each spec row. |
button | { label: string; href: string } | – | Enquiry button under the table. |
className | string | – | Extra classes merged onto the section. |
type Specs = {
area: string;
outside: string;
beds: string;
baths: string;
floor: string;
aspect: string;
parking: string;
from: string;
};
type HomeType = {
name: string;
title: string;
specs: Specs;
};
type Labels = {
pick?: string;
area?: string;
outside?: string;
beds?: string;
baths?: string;
floor?: string;
aspect?: string;
parking?: string;
from?: string;
};from row is set as a light figure, the others as body text.AnimatePresence, so a change fades the old value out over 0.2 s and rises the new one in without the row, its caption or its hairline moving.prefers-reduced-motion the table renders complete and value changes swap without the rise.