Theme · Product · Beginner
Booking / Scheduling
Booking site = a service list, a week/day strip with time slots, and a confirmation summary.
Tips
Keep the flow to three steps: service → slot → total. Show the running total as soon as a slot is picked so there are no surprises at confirm.
See also
Build a clean appointment-booking site for a spa called "Lumina Spa".
STYLE
- Soft lavender #f3f1fb page, ink #1d1d1f text, violet accent #6c5ce7
- White surfaces, hairline #ececf0 borders, 8–10px radii, generous whitespace
- System sans; the accent appears on the primary button and the selected day
LAYOUT
- Top bar: "Lumina Spa" wordmark left, links Services / Team, a pill "My bookings" button right
- A service list: each row has a service name and a "duration · price" line
- Signature Facial — 60 min · $120
- Deep Tissue — 90 min · $160
- Gel Manicure — 45 min · $55
- A calendar area: a week strip (Mon active, Tue, Wed, Thu, Fri) and a 4-up time-slot grid (9:00, 10:30, 13:00, 15:30)
- [tall] A booking summary: Service, When (Mon · 10:30), Total ($120), and a "Confirm booking" button
- [tall] Footer: "© 2026 Lumina Spa" + Gift cards · Policies
COMPONENTS
- Navbar, button, list, badge
- Service row: name + duration·price; day chip + time slot chip are selectable
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui