shadcn.io is not affiliated with official shadcn/ui
Appointment Booking Checkout Block for Ark UI
Booking four salon visits with a service picker and a weekly or fortnightly rhythm, a clash with a busy slot marked Booked with the two nearest free times to swap in, and a 20 percent deposit with the free-cancellation deadline.
Installation
Overview
Let people book a series of visits and see the clash before they pay, with this appointment booking checkout for React with Ark UI. A compact header from Harebell Row, a hair salon, sits over a narrow hairline frame with a plus mark on each corner, split into two cells. The first holds a service Native Select in a Field, a rhythm of two radio chips (Weekly, Every 2 weeks), and what the series costs: four visits, the 20 percent deposit due today and the balance at the salon, with the free-cancellation deadline counted back 24 hours from the first visit. The second lists the four dates from Tuesday 20 October at 10:00. One lands on a slot the stylist already has booked, so it is marked "Booked" and offers the two nearest free times as radios; the other rows say how long the visit takes and what it costs, in the same height. Pay is the one Shine Button: it refuses, names the date and moves focus until every clash has a new time, then locks the form and offers Undo. It's built from Native Select, Field, Button, Shine Button and Guides, with a CSS entrance only. For salons, clinics, tutors, studios and anything booked in a series.
FAQ
How is a clash found?
The stylist's diary is a typed list of busy slots. A visit whose date and time match one is a clash. Changing the rhythm changes which dates are in the series, so weekly puts the third visit on a busy slot and every two weeks puts the second there. The nearest free times are searched in a fixed order (the same day at 14:00, the next day, the day before, the same day at 16:30) and the first two that are not busy are offered.
What does choosing another time do?
The visit moves to the time you chose, loses its "Booked" mark and is marked "Moved"; its radios stay in the row so you can pick the other time instead. Pay stays refused, with the date named in the status line and focus on that row's first choice, until no visit is still on a busy slot.
How are the deposit and the deadline worked out?
The series is the price of one visit times four, in cents. The deposit is 20 percent of it, rounded once, and the balance is the rest. Free cancellation ends 24 hours before the first visit, counted with date arithmetic on a typed date, so it never depends on the clock.
What changes on a phone?
The two cells stack, with the service and rhythm first and the dates under them. The rows keep one height whether they show a duration or the free times, so choosing a time never moves the page.
How does the keyboard work?
The rhythm and each visit's alternatives are native radios, so the arrow keys move within a group and Tab moves between them. The select is a native select. Pay's refusal moves focus to the first alternative of the first clash.
What stays local, and how do I connect it for real?
Everything: the services, the diary and the result are typed or held in state, and nothing is booked or charged. To connect it, load free slots from your booking system for the chosen service, hold the series on your server when Pay is pressed, and take the deposit with your payment provider's hosted fields.