DemoBuy

Getting Started with the Booking Kit

Last updated on 2026-08-26

The Booking Kit is a production-ready booking and scheduling frontend built with Next.js 16, Tailwind CSS v4, and shadcn/ui. It ships 39 screens across 8 sections covering public booking flows, availability management, event types, team coordination, contacts, analytics, workflows, and settings.

What's Included

  • Public Booking Flow -- 8-screen wizard from service landing through payment and confirmation
  • Dashboard & Calendar -- bookings dashboard with today's schedule, calendar week view, recurring bookings, booking links, event type management
  • Availability & People -- weekly hours editor, booking policies, contacts directory, team management, team availability comparison
  • Analytics, Workflows & Settings -- bookings/revenue/team analytics, workflow automation builder, integrations, branding, payments, notifications, organization, roles, account, and auth pages

Prerequisites

  • Node.js 18.17 or later
  • pnpm (recommended) or npm / yarn
  • A code editor -- VS Code recommended

Quick Start

# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> booking-kit
cd booking-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the booking dashboard.

Tech Stack

Technology Purpose
Next.js 16 React framework with App Router
React 19 UI library
Tailwind CSS 4 Utility-first styling with oklch tokens
Radix UI / shadcn/ui Accessible headless primitives
Recharts Analytics charts (area, bar, line, composed)
Lucide React Icon library
next-themes Class-based dark mode
sonner Toast notifications
Figtree + Mulish + IBM Plex Mono Typography system

What Makes It Different

  • Complete booking experience -- public scheduling, admin management, team availability, and analytics in one kit
  • No backend required -- all screens use mock seed data so you can evaluate the UI immediately
  • oklch color system -- perceptually uniform colors that stay consistent across light and dark modes
  • WCAG AA accessible -- keyboard-navigable calendar grids, screen reader announcements, focus management, and 44px touch targets
  • Zero config -- no environment variables, no API keys, no database. Clone, install, run

Next Steps

Next

Installation