Hotel Room Booking

Booking7: Hotel Room Booking

A hotel room reservation card: a header shows the property name, star rating, night count, check-in/check-out dates, and a plus/minus guest counter, above a divided list of room-type rows each rendering a cover image, bed type, size, capacity, amenity chips, and per-night price, with a sticky footer that summarizes the selected room's total price and a "Reserve Room" button.

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

Base UI flavor

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

This installs the block to components/beste/block/booking7.tsx, plus the badge and button shadcn/ui primitives it uses for the eyebrow, night/popular badges, and the reserve button.

Quick start

The installed file exports booking7Demo alongside the block: the exact props behind the preview above. Spread it to get a working room booking card in one line.

import { Booking7, booking7Demo } from "@/components/beste/block/booking7";

export default function Page() {
  return <Booking7 {...booking7Demo} />;
}

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

import { Bath, Wifi } from "lucide-react";
import { Booking7 } from "@/components/beste/block/booking7";

export default function Page() {
  return (
    <Booking7
      badge={{ label: "Find a room", variant: "secondary" }}
      heading="Reserve your <strong>stay</strong>"
      hotelName="The Grand Azure Resort"
      rating={4.9}
      checkIn="April 18, 2026"
      checkOut="April 21, 2026"
      nights={3}
      currency="$"
      rooms={[
        {
          name: "Deluxe Suite",
          image: "/rooms/deluxe.jpg",
          price: 249,
          capacity: 3,
          bedType: "King Bed",
          size: "45 m²",
          amenities: [
            { icon: Wifi, label: "Free WiFi" },
            { icon: Bath, label: "Jacuzzi" },
          ],
          popular: true,
        },
      ]}
      labels={{ perNightLabel: "/ night", reserveButton: "Reserve Room" }}
    />
  );
}

Props

type RoomAmenity = {
  icon: LucideIcon;
  label: string;
};

type RoomType = {
  name: string;
  image: string;
  price: number;
  capacity: number;
  bedType: string;
  size: string;
  amenities: RoomAmenity[];
  popular?: boolean;
};

type Booking7Labels = {
  checkInLabel?: string;
  checkOutLabel?: string;
  guestsLabel?: string;
  nightSingular?: string;
  nightPlural?: string;
  popularBadge?: string;
  capacityPrefix?: string;
  capacitySuffix?: string;
  tooSmallLabel?: string;
  perNightLabel?: string;
  noSelection?: string;
  reserveButton?: string;
};

Behavior notes

• Selection is tracked by matching room.name as a string key in internal useState, so two rooms sharing a name would both register as selected, and the selection is never lifted out or exposed via a callback.
• The guest counter is its own useState seeded at 2 and clamped to the range 1 to 6; it is purely internal, has no onChange, and the guestsLabel value never scales the price.
• Each room row is disabled when room.capacity < guests, which dims it to opacity-50, sets cursor-not-allowed, hides its selection radio, and appends the tooSmallLabel in rose text next to the capacity line.
• heading renders through dangerouslySetInnerHTML, and only inline <strong> is styled (bold, primary color) by the heading's descendant selectors.
• The footer total is selected.price * nights; with no selection it shows the noSelection message and the "Reserve Room" button stays disabled.
• Clicking an enabled "Reserve Room" only calls console.log("Reservation:", ...) with the hotel, room, dates, nights, guests, total, and currency, so wiring an actual checkout is left to the integrator.
• The badge/heading/description header block is only rendered when at least one of those three props is set; the whole card sits inside a max-w-lg column and the room list itself has no scroll cap, so it grows with the number of rooms.
• Room images are plain <img> elements with object-cover, and the nightSingular vs nightPlural label is chosen by nights === 1 for the header badge (the footer summary always uses nightPlural).