Components

The Booking Kit organizes components into a three-tier hierarchy. Primitives are never modified, composites combine primitives into domain-specific patterns, and pages wire composites together with seed data.

Tier 1: Primitives (components/ui/)

28 shadcn/ui primitives provide the foundation. These are standard Radix UI-backed components and should not be modified directly.

Component	File	Description
AlertDialog	alert-dialog.tsx	Confirmation dialogs for destructive actions
Avatar	avatar.tsx	User profile images with fallback initials
Badge	badge.tsx	Status labels and category tags
Breadcrumb	breadcrumb.tsx	Navigation breadcrumbs
Button	button.tsx	Primary, secondary, outline, ghost, destructive variants
Calendar	calendar.tsx	Month calendar for date picking
Card	card.tsx	Content container with header, content, footer
Checkbox	checkbox.tsx	Boolean toggle with label
Command	command.tsx	Command palette / search
Dialog	dialog.tsx	Modal dialogs for forms and detail views
DropdownMenu	dropdown-menu.tsx	Context menus with keyboard navigation
Input	input.tsx	Text input with validation states
InputGroup	input-group.tsx	Input with prefix/suffix elements
Label	label.tsx	Form field label
Popover	popover.tsx	Floating content panel
Progress	progress.tsx	Linear progress indicator
RadioGroup	radio-group.tsx	Single-select option group
ScrollArea	scroll-area.tsx	Custom scrollbar container
Select	select.tsx	Dropdown select with search
Separator	separator.tsx	Horizontal/vertical divider
Sheet	sheet.tsx	Slide-in panel
Skeleton	skeleton.tsx	Loading placeholder
Sonner	sonner.tsx	Toast notification provider
Switch	switch.tsx	Boolean toggle
Table	table.tsx	Data table with header, body, rows, cells
Tabs	tabs.tsx	Tab navigation
Textarea	textarea.tsx	Multi-line text input
Tooltip	tooltip.tsx	Hover/focus contextual tooltip

Tier 2: Composites (Domain Components)

Composites are built from primitives and organized by domain. These are the components you will customize most.

Booking Flow (components/booking/)

Component	Props	Description
BookingStepper	currentStep, steps	Multi-step progress indicator for the public booking flow
HostCard	host, eventType	Sidebar card showing host info, event details, duration, and price
MiniCalendar	month, selectedDate, availability, onSelect	Compact month calendar with availability density indicators
SlotPicker	slots, selectedSlot, onSelect, timezone	Time slot grid grouped by period (morning/afternoon/evening)

Dashboard (components/dashboard/)

Component	Props	Description
StatCard	title, value, change, changeType, icon	KPI card with trend indicator
BookingStatusBadge	status	Color-coded badge for booking status (confirmed, pending, cancelled, completed, no-show)

Layout (components/layout/)

Component	Props	Description
AppSidebar	--	Navigation sidebar with collapsible groups for all sections
AppHeader	--	Top bar with breadcrumbs, search, notifications, and user menu
MobileSidebar	--	Responsive sidebar drawer for mobile viewports
SkipLink	--	Skip-to-main-content link for keyboard accessibility
ThemeToggle	--	Light/dark mode toggle button

Accessibility (components/a11y/)

Component	Props	Description
LiveRegion	message, politeness	aria-live region for announcing dynamic updates to screen readers
VisuallyHidden	children	Screen-reader-only text using the .sr-only pattern

Additional Domain Folders

These folders contain page-specific composites that are imported directly by their corresponding page components:

Folder	Domain	Examples
components/analytics/	Analytics	Chart wrappers, trend visualizations, funnel displays
components/availability/	Availability	Weekly hours editor, time range controls, date override picker
components/calendar/	Calendar	Week view grid, event blocks, navigation controls
components/contacts/	Contacts	Contact cards, booking history list, feedback display
components/events/	Event Types	Event type cards, create/edit forms, settings tabs
components/settings/	Settings	Integration cards, branding controls, notification toggles
components/team/	Team	Member cards, availability comparison, invite form
components/workflows/	Workflows	Workflow builder, action nodes, trigger selectors

Tier 3: Pages (app/)

Page components are located in the app/ directory under their respective route groups. Each page:

1. Imports composites from components/
2. Imports seed data from data/seed.ts
3. Imports types from types/index.ts
4. Imports formatters from lib/format.ts
5. Wires everything together with local state

Example Page Pattern

"use client"

import { useState, useMemo } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { StatCard } from "@/components/dashboard/stat-card"
import { BookingStatusBadge } from "@/components/dashboard/booking-status-badge"
import { bookings, dashboardStats } from "@/data/seed"
import { formatDate, formatTime } from "@/lib/format"
import type { Booking } from "@/types"

export default function BookingsPage() {
  const [search, setSearch] = useState("")
  // ... filter, sort, render
}

Using Components in Your Project

Import components using the @/ alias:

// Primitives
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Dialog } from "@/components/ui/dialog"

// Domain composites
import { SlotPicker } from "@/components/booking/slot-picker"
import { StatCard } from "@/components/dashboard/stat-card"
import { BookingStatusBadge } from "@/components/dashboard/booking-status-badge"

// Accessibility
import { LiveRegion } from "@/components/a11y/live-region"

Next Steps

• Design Tokens -- customize the color system
• Customization -- extend and modify components
• Screens -- see how components are composed into pages