UI Components Overview

The Booking Kit provides 31 React components and 2 hooks built on shadcn/ui, react-day-picker, react-big-calendar, and react-hook-form. Following the shadcn/ui convention, you copy the source code into your project and own it completely.

Install via CLI

# Add a single component
npx thebookingkit add booking-calendar

# Add multiple components
npx thebookingkit add booking-calendar time-slot-picker booking-questions

# List all available components
npx thebookingkit list

The CLI copies the component source file into your project and installs any required npm dependencies.

Manual Installation

Components live in registry/ui/src/components/. Copy the ones you need:

# Copy a component
cp registry/ui/src/components/booking-calendar.tsx src/components/thebookingkit/

# Copy the cn() utility (used by all components)
cp registry/ui/src/utils/cn.ts src/components/thebookingkit/utils/

Dependencies

Components depend on these npm packages:

Package	Used by
`react-day-picker`	BookingCalendar
`react-big-calendar`	AdminScheduleView, KioskCalendar
`react-hook-form`	BookingQuestions, ManualBookingForm, WorkflowBuilder, ProviderAuth, RoutingForm
`date-fns`	Date formatting across multiple components
`@thebookingkit/core`	Hooks (useAvailability, useProvider)

Customization

All components accept className and style props. They use the cn() utility for class merging (compatible with Tailwind CSS) and a tbk- CSS prefix to avoid collisions:

<BookingCalendar
  className="rounded-lg shadow-md"
  style={{ maxWidth: 400 }}
  {...otherProps}
/>

Booking Flow

Component	Description
BookingCalendar	Date picker with available date highlighting
TimeSlotPicker	Time slot grid for selected date
BookingQuestions	Dynamic form from question config
BookingConfirmation	Summary and confirm step
BookingStatusBadge	Status pill component
BookingManagementView	Customer booking list with cancel/reschedule
RecurringBookingPicker	Series frequency/count picker
SeatsPicker	Attendee count selector for group events
RoutingForm	Pre-booking conditional routing questionnaire

Admin & Host

Component	Description
AvailabilityEditor	Weekly schedule builder with time ranges
OverrideManager	Date-specific availability override manager
AdminScheduleView	Calendar view (react-big-calendar)
BookingLifecycleActions	Confirm/reject/cancel/no-show buttons
ManualBookingForm	Admin booking creation form
ProviderAuth	Login/signup/password-reset form
TeamAssignmentEditor	Team config + scheduling strategy
WorkflowBuilder	Workflow automation editor
WebhookManager	Webhook CRUD with delivery history

Payments

Component	Description
PaymentGate	Payment form wrapper with prepayment / deposit / no-show-hold modes
PaymentHistory	Payment ledger with status, type, and date filtering
EventTypeDepositFields	Drop-in fieldset for configuring deposits on an event type

Embed

Component	Description
EmbedConfigurator	Embed snippet generator (inline/popup/float)

Walk-In Queue

Component	Description
WalkInEntryForm	Form for adding walk-in customers
WalkInToggle	Toggle switch for walk-in acceptance
WalkInAnalytics	Analytics dashboard for queue metrics
QueueDisplay	Public-facing queue status display
QueueManager	Admin queue management (start/skip/remove)
QueueTicket	Individual queue ticket with position

Kiosk

Component	Description
KioskCalendar	Multi-provider day/week calendar view
KioskSettingsPanel	Kiosk display configuration
KioskShell	Full-screen kiosk shell with provider tabs
BreakBlockForm	Break/block-off period form

Hooks

Hook	Description
`useAvailability`	Fetches and caches available slots from API
`useProvider`	Fetches provider profile and settings