shadcn.io is not affiliated with official shadcn/ui
Welcome Dialog Onboarding Block for React
A planning board's first-run welcome: a dialog shown open over a drawn three-lane board, with a greeting, three things to try first, Start the tour and Explore on my own, and a Replay welcome button that opens the real dialog.
Installation
Overview
Greet someone the first time they open your app, with this welcome dialog for React with Base UI. It opens from the Pier Street board of Ravelby, a team planning board: the page header holds an outline Button, Replay welcome, and the board itself is drawn in three lanes of cards under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog says “Welcome, Maya”, then one sentence and three things to try first, each with an icon tile: add a card, move it along, invite someone. Start the tour, the only Shine Button, closes it and says under the board that the tour was requested; Explore on my own closes it without that, and either one puts focus back on Replay welcome. For preview the dialog is drawn open in place when the page loads; Replay welcome opens the real Dialog, with the same content. For planning boards, workspaces and any app with a first-run welcome.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the board: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. Replay welcome opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same WelcomeContent component. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How do I change the greeting and the three things?
Edit PERSON, DESCRIPTION and THINGS. Each thing has an id, a title, one sentence and an icon (add, move or invite); to use another icon, add it to ThingIcon. The first name is typed here; in your app pass the signed-in person's name and keep the list to three, since a welcome that asks for more than that gets skipped.
What do Start the tour and Explore on my own do, and how do I wire them?
Here both close the dialog and put focus on Replay welcome. Start the tour also sets a polite status message and shows it under the board: tour requested in this demo, nothing started. No request goes out. In your app call your tour from start (the onboarding tour is built for it) and, on either button, tell your server the person has seen the welcome so it doesn't open again.
How do I show it only once?
Remember on your server (or in the user's profile) that the welcome was seen, and render the Dialog with open set from that flag, here the shown state, instead of always starting in place. Keep Replay welcome in the page, or move it to a help menu, so people can bring it back.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts inside it and stays there until it closes, and Escape, Explore on my own, Start the tour and the close button all return focus to Replay welcome. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, its buttons and its close button close it and put focus on Replay welcome.
How does it look on a phone?
The copy shown on load docks to the foot of the board as a bottom sheet, its two actions pinned at the bottom with Start the tour on top and the list scrolling above them, and the drawn board shows its top bar and one lane. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.
Related
- Pro
Product Tour Onboarding
Welcome and toursA four-stop product tour over a drawn analytics dashboard: a coachmark points at the metrics, the segments, the report and the settings one at a time, with the part lit and the rest dimmed, and a Replay tour button that starts the real Tour.
- Pro
Setup Checklist Onboarding
ChecklistsA contract tool's get-started guide as a setup panel: six steps in a single-open accordion with one button in the open step, a count that follows what you finish, a menu that hides completed steps or the guide, and a pill that opens it again.
- Pro
Guided Walkthrough Onboarding
Welcome and toursA learn-by-doing walkthrough in a framed window: a drawn design-review app beside a docked guide of four tasks, where the control for the current task is ringed and doing it, by click or by key, opens the next.
- Pro
A CRM's first-run checklist: a continuous progress ring and a headline that follows it at the start, four steps in an accordion in the frame (the first picks Sales, Support or Hiring and the rest follow it), and Complete setup, which stays quiet until all four are done.
- 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
A page for a finished workspace setup: a full progress bar over five ticked steps with their dates, three launch rows for what to do next, and a quiet fall of confetti that stops with reduced motion.