UI Booking Flows Catalog

Five complete appointment booking journeys for client service sites — Pick slot → Details → Pay/deposit → Confirmation — with working step transitions. Optional service/type step leads when it fits the variant. See CATALOG.md for recipes.

.bkflow-classic

Classic Stepper

Horizontal progress across Service · Slot · Details · Pay · Done with Back / Continue.

  1. Service
  2. Slot
  3. Details
  4. Pay
  5. Done

Choose a service

.bkflow-split

Split Sticky Summary

Left stepped form; right sticky booking summary (service, datetime, deposit) always visible.

  1. Service
  2. Slot
  3. Details
  4. Pay
  5. Done

Choose a service

.bkflow-calendar

Calendar-First Journey

Leads with a month calendar + time slots, then details → pay → confirmation.

  1. Slot
  2. Details
  3. Pay
  4. Done

Select date & time

Strategy Session · 60 min · Harbor Studio

September 2026

Times for Thu, Sep 24 · Pacific

.bkflow-sheet

Mobile Sheet Stack

Phone-framed compact booking: service chips → slot sheet → details → deposit → confirmation.

Harbor Studio

Book a session.

Service

3 options
.bkflow-deposit

Deposit / Guest Fast Track

Guest-friendly path with deposit vs full pay radios, optional hold-with-card / pay later, ending on confirmation.

  1. Service
  2. Slot
  3. Details
  4. Pay
  5. Done

Harbor Studio · No account required

What do you need?