shadcn.io is not affiliated with official shadcn/ui
Welcome Dialog Onboarding Block for Solid
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 Solid with Ark 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 the Replay welcome button wrapped in DialogTrigger with asChild, 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.