shadcn.io is not affiliated with official shadcn/ui
Demo Booking Onboarding Block for React
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 Base 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.
Related
- Pro
Schedule Meeting Dialog
Time and schedulingA month page with its new event dialog shown open: a title, a day from a folded calendar, a start time and length, guest emails as tags, and a day timeline that moves with the time and warns when the meeting clashes.
- Pro
Invite Members Dialog
Share and inviteA household calendar's Members page with its invite dialog shown open: one email field that knows the household's domain, so an outside address joins as a guest, the people who already have access, and a Send invite button that adds a pending row.
- Pro
Feedback Survey Onboarding
One choiceA one-question survey in a non-modal popover under a Quick question tab on a drawn app bar, with six radio answers, a text box for Other that is always there, and a sentence that says what the answer does.
- Pro
Stylist Booking Contact
Visits and servicesA 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.
- Pro
Avatar Upload Onboarding
Profile and accountA picture step split in two: the member's initials turn into a round cropper for a file chosen on the device, and the crop shows live at 96, 40 and 24 pixels.
- Pro
Profile Setup Onboarding
Profile and accountA profile step for a creator site: name, what you do, pronouns and a bio with a count in a form, and beside it the card others will see, redrawn on every keystroke, with the profile address worked out from the name.