Specification Accordion Photo

Realestate21: Specification Accordion Photo

A specification list for a development's sales page: a tall photograph on the left and, on the right, an eyebrow, heading and lead above an accordion with a row per area (Kitchen, Bathroom, Finishes, Technology). Rows sit between hairlines that draw in as they scroll into view; only one row is open at a time, each opens to a bulleted list, and the chevron turns as it does.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate21.tsx plus the badge24 rule eyebrow and the shadcn/ui accordion primitive behind the specification rows.

Quick start

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

import { Realestate21, realestate21Demo } from "@/components/beste/block/realestate21";

export default function Page() {
  return <Realestate21 {...realestate21Demo} />;
}

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

import { Realestate21 } from "@/components/beste/block/realestate21";

export default function Page() {
  return (
    <Realestate21
      eyebrow="Specification"
      heading="What comes with every home"
      description="The same specification runs through all 24 homes. Open a section to read it in full."
      image={{
        src: "https://oud.pics/b/realestate/alder-bathroom.webp",
        alt: "A limestone bathroom with an oak vanity and a round mirror",
      }}
      groups={[
        {
          title: "Kitchen",
          items: ["Oak-fronted units with a pale stone island", "Integrated induction hob, oven and fridge freezer"],
        },
        {
          title: "Bathroom",
          items: ["Honed limestone floor and wall tiles", "Walk-in shower with a rain head"],
        },
      ]}
    />
  );
}

Props

type Group = {
  title: string;
  items: string[];
};

Behavior notes

• The accordion is type="single" and collapsible with the first group open by default, so opening a row closes the one before it and clicking the open row closes it.
• The shadcn chevron is kept and restyled to the foreground colour at size-5; the primitive's data-state=open rule turns it 180 degrees on a half-second ease.
• The primitive's own row border is removed and replaced by hairlines that draw from the left, one per row plus a closing line under the last, each timed with its row's rise.
• Bullets are small foreground dots rather than list markers, so the list reads the same in every browser.
• The photograph is gated on its own load event and on being in view, opens from the top over 1.6 seconds and drifts from -6% to 6% against the scroll; on small screens it moves below the list.