Booking Window Bar

Installation

pnpm dlx shadcn@latest add @cleverui/booking-window-bar

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { BookingWindowBar } from '@/components/ui/booking-window-bar'

Exampletsx

import { BookingWindowBar } from '@/components/ui/booking-window-bar'

export default function BookingWindowBarDemo() {
  return (
    <div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 sm:py-12">
      <BookingWindowBar
        checkIn="Fri 12 Sep"
        checkOut="Mon 15 Sep"
        nights="3 nights"
        guests="2 adults · 1 child"
        ctaLabel="Reserve your stay"
        href="#reserve"
      />
    </div>
  )
}

API reference

BookingWindowBar accepts the following props.

Prop	Type	Default	Description
`checkIn`*	`string`	–	PREFORMATTED display date like 'Fri 12 Sep', never parsed
`checkOut`*	`string`	–	PREFORMATTED display date like 'Mon 15 Sep'
`guests`*	`string`	–	preformatted summary like '2 adults · 1 child'
`nights`	`string`	–	optional quiet figure between the date cells, e.g. '3 nights'
`labels`	`{ checkIn?: string checkOut?: string guests?: string }`	–	field micro-labels; defaults 'Check-in' / 'Check-out' / 'Guests'
`ctaLabel`	`string`	`'Reserve your stay'`	–
`href`	`string`	–	renders the CTA as an anchor when set
`onSearch`	`() => void`	–	invoked on the reserve action when href is absent

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Related components

Room & Suite Card

A hotel room card in serif calm, framed view placeholder, quiet amenity icons, the from-rate in tabular figures with per-night whispered, and a single reserved booking accent.

Amenity Constellation

Hotel amenities as an airy constellation, icon and serif label pairs grouped by pool, spa and dining, one signature amenity carrying the accent. The whitespace does the luxury.

Guest Book Spread

Hotel guest reviews set like a guest book, one lead quote in large serif italic with stay details, smaller notes alongside. A React testimonial spread styled with Tailwind.

Tour Departures List

Upcoming small-group tour departures as a serif ledger, preformatted date ranges, tabular prices and real-text availability. A React booking list themed with Tailwind.

Destination Tabs

Destination tabs for travel sites, serif place names on a hairline rail, evocative intros and quiet fact pairs per place. Accessible React tabs themed with Tailwind tokens.

Itinerary Day Flow

A day-by-day itinerary set like a travel journal, serif day headings, a hairline timeline of moments with mono times, and evocative one-line descriptions that smell of the place.

Frequently asked questions

How do I install the Booking Window Bar component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/booking-window-bar`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Booking Window Bar require?

Booking Window Bar uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Booking Window Bar to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code