Overview

Overview

The Booking package is built for service-based business models where users book time, not just products. It extends the core Laioutr UI with components and page templates for scheduling-driven journeys: exploring services, selecting providers and locations, checking availability, and completing bookings with clear expectations.

Where a classic e-commerce experience optimizes for product discovery and checkout, the Booking package introduces the additional dimension of when and with whom — turning availability, duration, and constraints into first-class patterns that remain fast, accessible, and easy to compose.

What to Expect

Service, Provider & Location Pages

Components for presenting services with duration, pricing, prerequisites, and policies. Includes provider profiles, location detail sections, and contextual information such as amenities, accessibility details, and “what to bring” guidance.

Availability & Slot Selection

Calendar and slot selection components that clearly communicate real availability. Includes day/week/month views, time zone-aware displays, capacity-aware slots, and patterns for lead times, buffers, and limited availability.

Guided Booking Flow

Step-based booking templates that keep the journey predictable: selecting service, provider, location, date/time, and optional add-ons. Includes friction-reducing patterns like smart defaults, validation of constraints, and clear summaries before confirmation.

Customer Booking Management

Account components for viewing upcoming and past bookings, receipts, and booking details. Includes rescheduling and cancellation flows, policy-aware messaging, and status tracking (confirmed, pending, cancelled, completed, no-show).

Payments, Deposits & Vouchers

Components for handling booking-specific payment scenarios such as deposits, pay-later options, gift cards, vouchers, and cancellation fees — presented with transparent totals and policy explanations.

Notifications & Reminders

Patterns for confirmation and reminder messaging, including “add to calendar” actions, check-in information, and location instructions. Supports multiple channels and templates while keeping the frontend flows consistent.

Design Principles

All Booking components follow the same design system as the core Laioutr UI — using the same tokens, theming, and accessibility standards. They are built to be:

• Composable — Use them as standalone components or combine them into full page templates via Laioutr Studio.
• Themeable — All components respect the project's design tokens and can be styled to match any brand.
• Data-agnostic — Components work with Laioutr's canonical types and can be connected to any backend via the orchestr layer.
• Constraint-aware — Designed to handle real-world scheduling rules (durations, buffers, lead times, and policies) with UI that stays understandable.