Availability
Twenty-four homes across the warehouse and the courtyard wing. Filter by type, sort by what matters to you, and ask the sales team to hold one.
16 homes
Prices correct as of 1 October 2026 and subject to change. Reserved homes may return to the market; ask the sales team to be told first.
An availability table for a development: filter pills by home type and a sort select above rows of unit, floor, type, interior area, aspect, price and a dot-plus-word status (available, reserved, sold). Changing the filter or the sort fades the list out and rises the new rows in one by one under hairlines, sold rows are muted, and a count with a pricing note closes the table.
An availability table for a development's sales page: filter pills by home type and a sort select sit above a typographic table of unit, floor, type, interior area, aspect, price and status, with the status shown as a small dot and a word. Changing the filter or the sort fades the list out and rises the new rows in one by one under hairlines, sold rows are muted, and a home count with a pricing note closes the table.
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/realestate31?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/realestate31?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/realestate31.tsx plus the badge24 eyebrow and the shadcn/ui select primitive behind the sort control.
The installed file exports realestate31Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Realestate31, realestate31Demo } from "@/components/beste/block/realestate31";
export default function Page() {
return <Realestate31 {...realestate31Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Realestate31 } from "@/components/beste/block/realestate31";
export default function Page() {
return (
<Realestate31
eyebrow="Availability"
heading="Every home at Alder Row, as it stands today"
description="Filter by type, sort by what matters to you, and ask the sales team to hold one."
homes={[
{ unit: "W.02", floor: 0, type: "Type B", category: "two", area: 86, aspect: "River, east", price: 695000, status: "available" },
{ unit: "W.04", floor: 1, type: "Type C", category: "three", area: 112, aspect: "River, south", price: 895000, status: "reserved" },
{ unit: "W.08", floor: 4, type: "Type E", category: "penthouse", area: 146, aspect: "River, all round", price: 1650000, status: "sold" },
]}
filters={[
{ label: "All" },
{ label: "Two bed", category: "two" },
{ label: "Three bed", category: "three" },
]}
sorts={[
{ label: "Unit", key: "unit" },
{ label: "Price, low to high", key: "price" },
{ label: "Price, high to low", key: "price", direction: "desc" },
]}
currency="USD"
locale="en-US"
labels={{ unit: "Unit", floor: "Floor", type: "Type", area: "Interior", aspect: "Aspect", price: "Price", status: "Status", ground: "Ground", sort: "Sort by", homes: "homes", available: "Available", reserved: "Reserved", sold: "Sold", empty: "No homes of this type are left." }}
note="Prices correct as of 1 October 2026 and subject to change."
/>
);
}| 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. |
homes | Home[] | [] | Every home in the table; category ties a home to a filter, floor is a number with 0 for the ground floor. |
filters | Filter[] | [] | Pills above the table; a filter without category shows every home. The first one is active on load. |
sorts | Sort[] | [] | Options in the sort select; the first one is applied on load. |
currency | string | – | ISO currency code for the price column, USD when omitted. |
locale | string | – | Locale for number formatting, en-US when omitted. |
labels | Labels | {} | Column headings, the ground floor word, the sort caption, the count word, the three status words and the empty state. |
note | string | – | Pricing note under the table. |
className | string | – | Extra classes merged onto the section. |
type Status = "available" | "reserved" | "sold";
type Home = {
unit: string;
floor: number;
type: string;
category: string;
area: number;
aspect: string;
price: number;
status: Status;
};
type Filter = { label: string; category?: string };
type Sort = { label: string; key: "unit" | "floor" | "area" | "price"; direction?: "asc" | "desc" };
type Labels = {
unit?: string;
floor?: string;
type?: string;
area?: string;
aspect?: string;
price?: string;
status?: string;
ground?: string;
sort?: string;
homes?: string;
available?: string;
reserved?: string;
sold?: string;
empty?: string;
};category matches the active filter, sorted by the active sort: unit compares the unit strings, the other keys compare numbers, and direction: "desc" reverses the order.md breakpoint.Intl.NumberFormat and no decimals; the area column appends a square metre sign to the number.prefers-reduced-motion the rows, hairlines and header render in place without the entrance animation.