Skip to content
Browse themes
Marketing block

Appointment Booking Hero

A day strip built as a radio group rather than buttons, so arrow keys move between dates and sold-out days disable properly — the fold for anything sold by the appointment.

168 lineslucide-reactAdded 13 Aug 2026Updated 13 Sept 2026
  • hero
  • booking
  • appointment
  • calendar
  • local business

What's included

  • components/hero-booking.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add hero-booking

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Shoreditch · open until 8pm

A cut that survives the week.

Forty-five minutes, no rush, no upsell. Book the chair rather than the shop and you get the same hands every time.

Average wait for a first appointment: 2 days

Pick a day

Free to cancel up to 24 hours before.

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/hero-booking.tsx
/**
 * <HeroBooking> — a hero whose call to action is a date, not a signup.
 *
 * For local businesses, clinics, studios, restaurants and anything sold by
 * the appointment. The visitor's question is "can I get in on Thursday",
 * so the fold answers it with a strip of real days instead of sending them
 * to a booking page to find out.
 *
 * The day strip is a radio group, not a row of buttons. Picking a day is a
 * single choice among several, which is exactly what radios are, and it
 * buys arrow-key navigation between the days for free — a row of buttons
 * would need eleven Tab presses to reach the last one.
 *
 * The inputs are visually hidden rather than `hidden`: `display: none`
 * removes an input from the tab order entirely, which would make the whole
 * strip unreachable by keyboard. `sr-only` keeps it focusable, and
 * `peer-focus-visible` draws the ring on the label the sighted user sees.
 */

'use client'

import * as React from 'react'
import { CalendarDays, Clock, MapPin } from 'lucide-react'

export interface HeroBookingDay {
  /** Weekday abbreviation, e.g. "Thu". */
  weekday: string
  /** Day of month, e.g. "14". */
  day: string
  /** Slots left. Zero renders the day as unavailable. */
  slots: number
}

export interface HeroBookingProps {
  eyebrow?: string
  heading?: string
  subheading?: string
  submitLabel?: string
  days?: HeroBookingDay[]
  /** Called with the selected day when the form is submitted. */
  onBook?: (day: HeroBookingDay) => void
  className?: string
}

const DEFAULT_DAYS: HeroBookingDay[] = [
  { weekday: 'Mon', day: '11', slots: 2 },
  { weekday: 'Tue', day: '12', slots: 0 },
  { weekday: 'Wed', day: '13', slots: 5 },
  { weekday: 'Thu', day: '14', slots: 3 },
  { weekday: 'Fri', day: '15', slots: 7 },
]

export function HeroBooking({
  eyebrow = 'Shoreditch · open until 8pm',
  heading = 'A cut that survives the week.',
  subheading =
    'Forty-five minutes, no rush, no upsell. Book the chair rather than the shop and you get the same hands every time.',
  submitLabel = 'Check availability',
  days = DEFAULT_DAYS,
  onBook,
  className = '',
}: HeroBookingProps) {
  // Per-instance ids. A literal id in a reusable component is a
  // collision waiting for the second copy on the page — and a <label>
  // then resolves to whichever input rendered first.
  const uid = React.useId()
  const firstAvailable = days.find((d) => d.slots > 0) ?? days[0]
  const [selected, setSelected] = React.useState(firstAvailable?.day ?? '')

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault()
    const day = days.find((d) => d.day === selected)
    if (day) onBook?.(day)
  }

  return (
    <section className={`relative overflow-hidden ${className}`}>
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute -top-24 right-0 h-80 w-80 rounded-full bg-amber-500/15 blur-3xl border border-transparent" />
        <div className="absolute bottom-0 left-1/4 h-72 w-72 rounded-full bg-primary/15 blur-3xl border border-transparent" />
      </div>

      <div className="mx-auto grid w-full max-w-7xl items-center gap-12 px-4 py-16 sm:px-6 lg:grid-cols-[1.05fr_1fr] lg:gap-16 lg:px-8 lg:py-24">
        {/* -- Copy ------------------------------------------------------ */}
        <div className="max-w-xl">
          {eyebrow ? (
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur">
              <MapPin aria-hidden className="h-3.5 w-3.5 text-primary" />
              {eyebrow}
            </span>
          ) : null}

          <h1 className="mt-5 text-balance text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
            {heading}
          </h1>

          <p className="mt-5 text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg">
            {subheading}
          </p>

          <p className="mt-6 flex items-center gap-2 text-xs text-muted-foreground">
            <Clock aria-hidden className="h-4 w-4" />
            Average wait for a first appointment: 2 days
          </p>
        </div>

        {/* -- Booking card ---------------------------------------------- */}
        <form
          onSubmit={handleSubmit}
          className="rounded-2xl border border-border/60 bg-card/70 p-6 shadow-xl shadow-black/10 backdrop-blur sm:p-7"
        >
          <fieldset>
            <legend className="flex items-center gap-2 text-sm font-semibold">
              <CalendarDays aria-hidden className="h-4 w-4 text-primary" />
              Pick a day
            </legend>

            <div className="mt-5 grid grid-cols-5 gap-2">
              {days.map((d) => {
                const unavailable = d.slots === 0
                const id = `${uid}-hero-booking-day-${d.day}`

                return (
                  <div key={d.day} className="min-w-0">
                    <input
                      type="radio"
                      id={id}
                      name="hero-booking-day"
                      value={d.day}
                      checked={selected === d.day}
                      disabled={unavailable}
                      onChange={() => setSelected(d.day)}
                      className="peer sr-only"
                    />
                    <label
                      htmlFor={id}
                      className="flex cursor-pointer flex-col items-center gap-0.5 rounded-xl border border-border/60 px-1 py-3 text-center transition-colors hover:border-primary/40 peer-checked:border-primary peer-checked:bg-primary/10 peer-disabled:cursor-not-allowed peer-disabled:opacity-40 peer-disabled:hover:border-border/60 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background"
                    >
                      <span className="block w-full truncate text-[10px] uppercase tracking-wide text-muted-foreground">
                        {d.weekday}
                      </span>
                      <span className="text-lg font-bold tracking-tight">{d.day}</span>
                      <span className="block w-full truncate text-[10px] text-muted-foreground">
                        {unavailable ? 'Full' : `${d.slots} left`}
                      </span>
                    </label>
                  </div>
                )
              })}
            </div>
          </fieldset>

          <button
            type="submit"
            className="mt-6 inline-flex h-12 w-full items-center justify-center rounded-xl bg-primary px-6 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
          >
            {submitLabel}
          </button>

          <p className="mt-3 text-center text-[11px] text-muted-foreground">
            Free to cancel up to 24 hours before.
          </p>
        </form>
      </div>
    </section>
  )
}

Before you paste

  • Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
  • Install: npm i lucide-react
  • Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/hero-booking.tsx and import it where you need the section:

import { HeroBooking } from '@/components/hero-booking'

Customize

3 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

PropTypeDefault
eyebrowstring'Shoreditch · open until 8pm'
headingstring'A cut that survives the week.'
subheadingstring—
submitLabelstring'Check availability'
daysHeroBookingDay[]DEFAULT_DAYS
onBookCalled with the selected day when the form is submitted.(day: HeroBookingDay) => void—
classNamestring''

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

hero-booking.html
<!--
  Appointment Booking Hero — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<section class="relative overflow-hidden ">
  <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
    <div class="absolute -top-24 right-0 h-80 w-80 rounded-full bg-amber-500/15 blur-3xl border border-transparent"></div>
    <div class="absolute bottom-0 left-1/4 h-72 w-72 rounded-full bg-primary/15 blur-3xl border border-transparent"></div>
  </div>
  <div class="mx-auto grid w-full max-w-7xl items-center gap-12 px-4 py-16 sm:px-6 lg:grid-cols-[1.05fr_1fr] lg:gap-16 lg:px-8 lg:py-24">
    <div class="max-w-xl">
      <span class="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3.5 w-3.5 text-primary" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>Shoreditch · open until 8pm</span>
      <h1 class="mt-5 text-balance text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">A cut that survives the week.</h1>
      <p class="mt-5 text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg">Forty-five minutes, no rush, no upsell. Book the chair rather than the shop and you get the same hands every time.</p>
      <p class="mt-6 flex items-center gap-2 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-4 w-4" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>Average wait for a first appointment: 2 days</p>
    </div>
    <form class="rounded-2xl border border-border/60 bg-card/70 p-6 shadow-xl shadow-black/10 backdrop-blur sm:p-7">
      <fieldset>
        <legend class="flex items-center gap-2 text-sm font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days h-4 w-4 text-primary" aria-hidden="true"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M8 14h.01"></path><path d="M12 14h.01"></path><path d="M16 14h.01"></path><path d="M8 18h.01"></path><path d="M12 18h.01"></path><path d="M16 18h.01"></path></svg>Pick a day</legend>
        <div class="mt-5 grid grid-cols-5 gap-2">
          <div class="min-w-0">
            <input type="radio" id="_R_0_-hero-booking-day-11" class="peer sr-only" name="hero-booking-day" checked="" value="11" />
            <label for="_R_0_-hero-booking-day-11" class="flex cursor-pointer flex-col items-center gap-0.5 rounded-xl border border-border/60 px-1 py-3 text-center transition-colors hover:border-primary/40 peer-checked:border-primary peer-checked:bg-primary/10 peer-disabled:cursor-not-allowed peer-disabled:opacity-40 peer-disabled:hover:border-border/60 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background">
              <span class="block w-full truncate text-[10px] uppercase tracking-wide text-muted-foreground">Mon</span>
              <span class="text-lg font-bold tracking-tight">11</span>
              <span class="block w-full truncate text-[10px] text-muted-foreground">2 left</span>
            </label>
          </div>
          <div class="min-w-0">
            <input type="radio" id="_R_0_-hero-booking-day-12" disabled="" class="peer sr-only" name="hero-booking-day" value="12" />
            <label for="_R_0_-hero-booking-day-12" class="flex cursor-pointer flex-col items-center gap-0.5 rounded-xl border border-border/60 px-1 py-3 text-center transition-colors hover:border-primary/40 peer-checked:border-primary peer-checked:bg-primary/10 peer-disabled:cursor-not-allowed peer-disabled:opacity-40 peer-disabled:hover:border-border/60 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background">
              <span class="block w-full truncate text-[10px] uppercase tracking-wide text-muted-foreground">Tue</span>
              <span class="text-lg font-bold tracking-tight">12</span>
              <span class="block w-full truncate text-[10px] text-muted-foreground">Full</span>
            </label>
          </div>
          <div class="min-w-0">
            <input type="radio" id="_R_0_-hero-booking-day-13" class="peer sr-only" name="hero-booking-day" value="13" />
            <label for="_R_0_-hero-booking-day-13" class="flex cursor-pointer flex-col items-center gap-0.5 rounded-xl border border-border/60 px-1 py-3 text-center transition-colors hover:border-primary/40 peer-checked:border-primary peer-checked:bg-primary/10 peer-disabled:cursor-not-allowed peer-disabled:opacity-40 peer-disabled:hover:border-border/60 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background">
              <span class="block w-full truncate text-[10px] uppercase tracking-wide text-muted-foreground">Wed</span>
              <span class="text-lg font-bold tracking-tight">13</span>
              <span class="block w-full truncate text-[10px] text-muted-foreground">5 left</span>
            </label>
          </div>
          <div class="min-w-0">
            <input type="radio" id="_R_0_-hero-booking-day-14" class="peer sr-only" name="hero-booking-day" value="14" />
            <label for="_R_0_-hero-booking-day-14" class="flex cursor-pointer flex-col items-center gap-0.5 rounded-xl border border-border/60 px-1 py-3 text-center transition-colors hover:border-primary/40 peer-checked:border-primary peer-checked:bg-primary/10 peer-disabled:cursor-not-allowed peer-disabled:opacity-40 peer-disabled:hover:border-border/60 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background">
              <span class="block w-full truncate text-[10px] uppercase tracking-wide text-muted-foreground">Thu</span>
              <span class="text-lg font-bold tracking-tight">14</span>
              <span class="block w-full truncate text-[10px] text-muted-foreground">3 left</span>
            </label>
          </div>
          <div class="min-w-0">
            <input type="radio" id="_R_0_-hero-booking-day-15" class="peer sr-only" name="hero-booking-day" value="15" />
            <label for="_R_0_-hero-booking-day-15" class="flex cursor-pointer flex-col items-center gap-0.5 rounded-xl border border-border/60 px-1 py-3 text-center transition-colors hover:border-primary/40 peer-checked:border-primary peer-checked:bg-primary/10 peer-disabled:cursor-not-allowed peer-disabled:opacity-40 peer-disabled:hover:border-border/60 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background">
              <span class="block w-full truncate text-[10px] uppercase tracking-wide text-muted-foreground">Fri</span>
              <span class="text-lg font-bold tracking-tight">15</span>
              <span class="block w-full truncate text-[10px] text-muted-foreground">7 left</span>
            </label>
          </div>
        </div>
      </fieldset>
      <button type="submit" class="mt-6 inline-flex h-12 w-full items-center justify-center rounded-xl bg-primary px-6 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Check availability</button>
      <p class="mt-3 text-center text-[11px] text-muted-foreground">Free to cancel up to 24 hours before.</p>
    </form>
  </div>
</section>
  • This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
  • It is one frame: the component in its initial state, with no props applied beyond the defaults.
  • This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
  • Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
13 more blocks in Heroes
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Heroes
Shipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once
More Heroes blocks
View category
Open the full page for this block
Split Hero with Product Panel
Copy on the left, a drawn product panel on the right — the default hero for anything with an interface to show, with no image asset to host and no layout shift while it loads.
Heroes176 lines1 dep
Open the full page for this block
Centered Announcement Hero
A linked announcement pill over a large centered headline, dual CTAs and a wordmark strip — the hero for a product with nothing to screenshot yet.
Heroes125 lines1 dep
Open the full page for this block
Hero with Browser Frame
Centered copy above a screenshot in window chrome, masked at the bottom so a tall image never dictates the height of the fold. Wraps your own img or video.
Heroes191 lines1 dep
Open the full page for this block
Waitlist Hero with Email Capture
A pre-launch hero whose only ask is an email address, with pending and success states and a signup count that argues for finishing rather than starting.
Heroes163 lines1 dep
Open the full page for this block
Search-First Hero
A hero whose primary action is a real search form with prefilling suggestion chips — for marketplaces and directories, where sending the visitor below the fold to find the search box is the whole failure.
Heroes128 lines1 dep
Open the full page for this block
Developer Hero with Install Command
A drawn terminal whose install line is real, selectable text with a working copy button and a feature-detected clipboard call — the hero for anything adopted by typing rather than signing up.
Heroes163 lines1 dep
Open the full page for this block
App Download Hero with Phone
A drawn phone beside two store links built as real anchors rather than badge images, so they inherit the theme, need no hosted asset and carry an accessible name that is not a filename.
Heroes161 lines1 dep
Open the full page for this block
Hero Anchored by a Customer Quote
Pitch on the left, a marked-up figure and blockquote on the right, so the claim and the evidence for it share the fold instead of sitting a scroll apart.
Heroes129 lines1 dep
Open the full page for this block
Hero with Proof Metrics
A centered hero closing on a definition list of scale numbers, with a masked grid wash behind it — for infrastructure and payments, where "how many" is the second question a buyer asks.
Heroes129 lines1 dep
Open the full page for this block
Editorial Masthead Hero
A serif display headline over a 60-character standfirst and a real byline, with one text link and no competing CTAs — the hero for publications and essays, where the writing is the product.
Heroes99 lines1 dep
Open the full page for this block
Full-Bleed Media Hero
Copy over your own image or video, with a graded scrim and deliberately fixed light-on-dark text — because the background is a photograph in both themes, so flipping the copy would break it.
Heroes106 lines1 dep
Open the full page for this block
Integration Wall Hero
A hero whose visual is the connector list itself, marked up as a real list so a visitor can skim it for their own stack — asset-free initials tiles, no third-party marks to license.
Heroes135 lines1 dep
Open the full page for this block
Hero with Inline Price
Names the price above the fold for single-plan and one-time products, with the former price in a real strikethrough element so it is never announced as the current one.
Heroes135 lines1 dep