Search Bar Hero

Booking12: Search Bar Hero

A hotel-search hero built as a single card with four inline segments: a location field with a filterable destination dropdown, a date-range popover calendar, a guests popover that steps adults, children, and rooms with plus/minus buttons, and a search button, all above an optional heading, description, badge, and a row of popular-destination pills.

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

Base UI flavor

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

This installs the block to components/beste/block/booking12.tsx, plus the badge, button, calendar, and popover shadcn/ui primitives it uses for the section eyebrow, the search and done buttons, the date-range picker, and the dates popover panel.

Quick start

The installed file exports booking12Demo alongside the block: the exact props behind the preview above. Spread it to get a working search-bar hero in one line.

import { Booking12, booking12Demo } from "@/components/beste/block/booking12";

export default function Page() {
  return <Booking12 {...booking12Demo} />;
}

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

import { Booking12 } from "@/components/beste/block/booking12";

export default function Page() {
  return (
    <Booking12
      badge={{ label: "Hotels", variant: "secondary" }}
      heading="Find your <strong>next stay</strong>"
      description="Search deals on hotels, apartments, and much more."
      suggestions={[
        { name: "Paris", country: "France" },
        { name: "Tokyo", country: "Japan" },
        { name: "New York", country: "United States" },
      ]}
      labels={{
        whereLabel: "Where",
        wherePlaceholder: "Search destinations",
        datesLabel: "Check-in / Check-out",
        datesPlaceholder: "Add dates",
        guestsLabel: "Guests",
        guestsSummaryTemplate: "{guests} guests · {rooms} {roomLabel}",
        searchButton: "Search",
        popularLabel: "Popular:",
      }}
    />
  );
}

Props

type LocationSuggestion = {
  name: string;
  country: string;
};

type Booking12Labels = {
  whereLabel?: string;
  wherePlaceholder?: string;
  datesLabel?: string;
  datesPlaceholder?: string;
  guestsLabel?: string;
  guestsSummaryTemplate?: string;
  adultsLabel?: string;
  adultsDescription?: string;
  childrenLabel?: string;
  childrenDescription?: string;
  roomsLabel?: string;
  doneButton?: string;
  searchButton?: string;
  popularLabel?: string;
};

Behavior notes

• All input is tracked in local useState (location, dateRange, adults, children, rooms) and never surfaced through props; there is no onSearch or onChange callback, so handleSearch only calls console.log(...) with the current selection, leaving submission wiring to the integrator.
• heading is rendered via dangerouslySetInnerHTML, and its inline <strong> is styled bold and in the primary color through a [&>strong] selector.
• The location dropdown shows all suggestions when the field is empty and case-insensitively name-filters them once the user types; the panel is hidden unless focused, and its blur handler waits 200ms before closing so a click can register.
• The calendar renders as a range picker that disables any date before today (date < todayStart), and numberOfMonths switches between 1 and 2 based on a (min-width: 768px) media query set on mount.
• Guest steppers are clamped: adults 1 to 10, children 0 to 8, rooms 1 to 5; the summary line is derived from guestsSummaryTemplate by replacing {guests}, {rooms}, and {roomLabel} (which pluralizes to room/rooms).
• The popular-destination row renders only the first five suggestions (suggestions.slice(0, 5)) and each pill just sets location; the eyebrow popularLabel is omitted when falsy.
• The header block only renders when at least one of badge, heading, or description is provided, and on desktop the four segments split to fixed basis widths (32% / 32% / 24% plus the search button) with vertical dividers.