Visit Sheet

Booking31: Visit Sheet

A visit page rather than a booking form: a portrait photograph drifting inside its frame beside the invitation, then address and opening hours side by side under one rule, closed by a pill action and a quieter second link.

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://ui.beste.co/r/booking31?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/booking31?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/booking31.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Booking31, booking31Demo } from "@/components/beste/block/booking31";

export default function Page() {
  return <Booking31 {...booking31Demo} />;
}

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

import { Booking31 } from "@/components/beste/block/booking31";

export default function Page() {
  return (
    <Booking31
      eyebrow="Visit"
      heading="Come and see the rooms before you decide anything."
      description="Most Thursdays we keep the late afternoon free for visits."
      address={{
        lines: ["Rua da Prata 12, second floor", "1100-415 Lisbon"],
        directions: "Four minutes on foot from Baixa-Chiado, with a lift to the door.",
      }}
      hours={[
        { day: "Monday to Thursday", hours: "9:00 to 21:00" },
        { day: "Friday", hours: "9:00 to 15:00" },
      ]}
      button={{ label: "Plan a visit", href: "/visit", tone: "dark" }}
      link={{ label: "Or ask a question first", href: "mailto:[email protected]" }}
      image={{ src: "/rooms/kitchen.jpg", alt: "A kitchen with oak cabinets and a window onto a garden" }}
      labels={{ address: "Where", hours: "When" }}
    />
  );
}

Props

type HourRow = {
  day: string;
  hours: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The address takes an array of lines rather than one string with newlines, so each line becomes its own block span and the serif setting wraps exactly where you decided it should.
• Opening hours are a dl with the day and its hours stacked rather than opposed, which is what stops a long value like "Quiet days only" from colliding with a long day label in a narrow column.
• The two facts columns share one border-t and split at sm, so on a phone the address and the hours stack in reading order instead of squeezing into two thin columns.
• The photograph drifts -10% to 10% against a 1.2 scale and clears from blur(24px) on decode, with a complete check on mount so a cached image is not left blurred.
• The pill and the plain link sit in one wrapping flex row, so the secondary action drops under the primary on a narrow screen rather than shrinking beside it.
• The link's arrow lifts only under motion-safe:, so the affordance is dropped for reduced motion while the link still works.
• Every block is independently optional: without image the copy column keeps its grid position, and the action row disappears entirely when neither button nor link is given.