shadcn.io is not affiliated with official shadcn/ui
Stylist Booking Contact Block for Radix UI
A salon booking that starts with the person: three stylists in hairline cells, each with their next three openings as chips, a live appointment line, and a form that checks itself and confirms in place.
Installation
Overview
A booking section for React with Radix UI, split into bands by the page's own rules. A start-aligned header sits over three stylists in cells that share their hairlines, rail to rail: each cell holds a radio, an initials avatar, the stylist's name and specialty, and their next three openings as chips. Choosing a chip picks that stylist too, fills the chip with the foreground colour and writes the appointment in words on the line below, in a polite status region. A band under it holds the visitor's name, a phone number and the Shine Button. Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid request turns into a confirmation in the same space that names the day, the time and the stylist, takes focus, and offers "Book another appointment". The rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Radio Group, Avatar, Button, Field, Input, Guides and Shine Button, with CSS transitions for the entrances and your theme's tokens for every colour. For salons, barbers, clinics and any business where customers choose who they see.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your booking system: stylistId, openingIndex, name and phone hold everything the visitor chose. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
Where do the openings and their weekdays come from?
Each stylist's openings are fixed example data in STYLISTS: a number of days from today and a time. The weekday on each chip is worked out from today once the page is in the browser, so no date is written into the file and the server's render never goes stale; before that the chip shows only the time. In production, build openings from your calendar for the next few days.
How do the stylist and the chips work together?
The three cells are one radio group, so arrow keys move between the stylists. The chips are buttons that report whether they are pressed. Choosing a chip picks its stylist as well; choosing another stylist clears an opening that belongs to the first. If the visitor submits without an opening, the message under the cells says which choice is missing and focus moves to the first chip.
How is each stylist's radio labelled?
The stylist's name and specialty are the radio's label.
The radio takes an id and a label with htmlFor beside it, so clicking the avatar or the text selects it.
Is the phone number real?
No. +1 (415) 555-0171 is in the 555-0100 to 555-0199 range set aside for fiction. Replace PHONE and PHONE_HREF at the top of the file with yours. The number keeps its order in a right-to-left layout.
How does it fit on a phone?
Below md the cells stack, one stylist per row, each with its chips wrapping under the name. The form starts right under the header, the appointment line follows the cells, and the submit button goes full width, so nothing scrolls sideways at 320 pixels. The header and the cells fade up once on load; with reduced motion they simply appear.