shadcn.io is not affiliated with official shadcn/ui
Demo Booking Onboarding Block for Radix UI
A walkthrough booking dialog drawn open over a CRM pipeline: five working days, five times a day with some taken, a name and an email, and a booking that shows behind it.
Installation
Overview
Let a trial user book a walkthrough from inside the product, with this booking dialog for React with Radix UI. It is the page of Fernlaith, a CRM, with the dialog drawn open over a pipeline and its banner. The Dialog asks for a day out of the next five working days, a time that day (five slots, some taken and marked with the word, never only a colour), a name and an email, and says in words which time zone the times are in. Book demo is the one Shine Button: quiet until a time, a name and an email are in, then it books; pressed early it names what is missing and puts focus there. A booking shows behind the dialog as a line on the banner, the header button changes to "Change booking", and the status says "Booked for Fri 16 Oct, 3:00 pm Eastern Daylight Time in this demo. No invite is sent."
Shown open in place
On load the dialog is drawn in place, a native non-modal dialog over the drawn pipeline, so nothing is trapped or focused. The header's Book a demo opens the real Dialog, with its focus trap, Escape and focus back on the button, and the in-place copy stays closed until a reload. In your app keep the Dialog and drop the in-place copy.
FAQ
Where do the days and times come from?
The days are the next five working days counted from a typed AS_OF date, skipping Saturdays and Sundays, so they never depend on the visitor's clock. The five times a day are TIMES, and TAKEN lists the ones already gone on each day. Replace both with your calendar's free slots.
What does a taken time do?
It stays on the grid, struck through and marked "Taken", and cannot be chosen: the radio is disabled and the text keeps full contrast. Changing the day clears the chosen time, because a time belongs to its day.
How is the time zone handled?
The times are said to be in Eastern Daylight Time, an example zone, in a line under the grid, and the chosen slot is repeated with it ("Fri 16 Oct, 3:00 pm, Eastern Daylight Time."). Nothing is converted. In your app show the visitor's own zone, read in the browser, and book in it.
What does Book demo refuse?
In order: no time ("Pick a time to book."), no name ("Enter your name.") and an email that is not an address ("Enter an email like you@company.com."). Each is said under its field and in the status, and focus goes to it; the slot and field lines are reserved, so the dialog never grows.
How does the dialog behave on a phone?
It docks to the foot of the screen and its body scrolls while Cancel and Book demo stay pinned; the day strip is the first thing in it. Escape or Cancel closes the open dialog and puts focus back on the header button.
What stays local in the demo, and how do I wire it?
Everything: no invite is created, nothing is sent and nothing is booked. In your app send the day, time, name and email to your scheduling service where book says so, mark the slot taken from its reply, and show its confirmation in place of the status line.