Book a Viewing Form

Realestate43: Book a Viewing Form

A viewing request for a development's sales page: eyebrow, heading and lead across the top, then a two-column GET form. On the left a pill-shaped date field opens a shadcn calendar limited to future days and a row of time-slot pills writes the chosen time to a hidden input; on the right sit name, email and phone fields, closing on a hairline with the submit pill and a note about opening hours.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate43.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the submit button, and the shadcn/ui button, calendar, input and popover primitives behind them, the date picker and the three text fields.

Quick start

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

import { Realestate43, realestate43Demo } from "@/components/beste/block/realestate43";

export default function Page() {
  return <Realestate43 {...realestate43Demo} />;
}

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

import { Realestate43 } from "@/components/beste/block/realestate43";

export default function Page() {
  return (
    <Realestate43
      eyebrow="Book a viewing"
      heading="See the show apartment and walk the courtyard."
      description="Viewings take about 45 minutes and start at the sales suite on Mill Lane."
      form={{
        action: "/viewings",
        params: { date: "date", time: "time", name: "name", email: "email", phone: "phone" },
      }}
      slots={["10:00", "12:00", "15:00"]}
      locale="en-US"
      labels={{
        date: "Day",
        pick: "Choose a day",
        time: "Time",
        name: "Full name",
        email: "Email",
        phone: "Phone",
        submit: "Request this viewing",
      }}
      note="The sales suite is open Monday to Saturday."
    />
  );
}

Props

type ViewingForm = {
  action: string;
  params?: { date?: string; time?: string; name?: string; email?: string; phone?: string };
};

type Labels = {
  date?: string;
  pick?: string;
  time?: string;
  name?: string;
  email?: string;
  phone?: string;
  submit?: string;
};

Behavior notes

• The form is a plain method="get" form posting to form.action; every parameter name comes from form.params and falls back to date, time, name, email and phone. The three text fields carry native required.
• The date lives in a shadcn Calendar inside a Popover, single-select, with every day before today disabled; today is read on the client after mount so server and client markup match. Picking a day closes the popover and writes the local YYYY-MM-DD value to a hidden input.
• Time slots are aria-pressed pills; the chosen slot goes to a second hidden input. Submitting without a day opens the calendar instead; submitting without a time focuses the first slot pill.
• The chosen day's label is formatted with toLocaleDateString in the locale prop (weekday, month, day).
• Everything enters on scroll in one sequence: heading, lead, the date field, the slot caption and pills (60 ms apart), the three fields (100 ms apart), then the hairline draws and the submit row rises last. With prefers-reduced-motion nothing moves.