Booking slots

Pro

Appointment picker with a 14 day date strip, grouped time slots, summary and confirm callback.

app/page.tsx

"use client";

import { BookingSlots } from "@/components/facade/booking-slots";

export default function Demo() {
  return (
    <div className="mx-auto w-full max-w-2xl p-4">
      <BookingSlots
        serviceName="Deep tissue massage with Lena"
        durationMinutes={60}
        priceLabel="$115"
        closedWeekdays={[0, 1]}
        confirmLabel="Book appointment"
      />
    </div>
  );
}

Installation

$npx shadcn@latest add @facade/booking-slots

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { BookingSlots } from "@/components/facade/booking-slots";

export default function Page() {
  return <BookingSlots />;
}

Props

BookingSlotsProps is exported, so you can extend or wrap it. Every prop has a default; <BookingSlots /> renders the example above.

Props of BookingSlots
Prop	Type	Description
serviceName	string	Name of the service being booked, shown in the summary.
durationMinutes	number	Duration in minutes, shown in the summary.
priceLabel	string	Price label, e.g. "$85".
days	number	How many days to show in the strip.
getSlots	(date: Date) => string[]	Return all bookable times ("HH:mm") for a date. Default: 9 AM to 7:30 PM every 30 min.
isSlotDisabled	(date: Date, time: string) => boolean	Return true when a time is taken. Default: a stable pseudo-random pattern.
closedWeekdays	number[]	Days of week that are closed (0 = Sunday).
confirmLabel	string
onConfirm	(selection: BookingSelection) => void
className	string

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade booking slots to this page and adapt the copy to our business.