Buyer Quotes List

Realestate49: Buyer Quotes List

Three long buyer testimonials for a development's sales page, stacked under a header grid: each row opens with a hairline that draws across and a small line-drawn quotation mark, the quote itself is set large in the middle columns, and the buyer's name, the type they bought and the month sit on the right. The rows rise one after another as they scroll into view, and a closing hairline carries a short permission note.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate49.tsx plus the badge24 eyebrow it renders above the heading; no shadcn/ui primitives are needed.

Quick start

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

import { Realestate49, realestate49Demo } from "@/components/beste/block/realestate49";

export default function Page() {
  return <Realestate49 {...realestate49Demo} />;
}

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

import { Realestate49 } from "@/components/beste/block/realestate49";

export default function Page() {
  return (
    <Realestate49
      eyebrow="From the first buyers"
      heading="9 homes went at launch. 3 of the buyers explain why."
      description="Long answers from people who reserved in the first weeks."
      quotes={[
        {
          quote: "The warehouse wall runs through the living room and you can hear the river when it rains. I reserved at the second visit.",
          name: "Sufjan Stevens",
          detail: "Type C, three bedroom in the courtyard wing",
          date: "Reserved April 2026",
        },
        {
          quote: "The brochure had the service charge on the first page, not the last. That kind of straightness made the rest easy.",
          name: "Esperanza Spalding",
          detail: "Type A, two bedroom in the warehouse",
          date: "Reserved May 2026",
        },
      ]}
      note="Quotes are from exchanged buyers and are used with their permission."
    />
  );
}

Props

type Quote = {
  quote: string;
  name: string;
  detail: string;
  date: string;
};

Behavior notes

• Each row enters once it scrolls into view (10% margin), rising 16 pixels with a delay of 0.1 seconds plus 0.12 seconds per row, so the three quotes read top to bottom in sequence.
• The hairline above a row scales in from the left over 1.2 seconds on the same delay as its row, and the closing hairline under the list waits for all rows before it draws.
• The quotation glyph is two paths on a 30 by 22 grid drawn with pathLength from zero, the second mark starting 0.15 seconds after the first, both 0.2 seconds after their row begins to rise.
• Attribution is three stacked lines: name in the foreground colour, detail and date as muted captions; nothing in the block is bolder than font-medium.
• With prefers-reduced-motion every row, hairline and glyph renders complete with no entrance.