shadcn.io is not affiliated with official shadcn/ui
Product Tour Onboarding Block for Solid
A 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.
Installation
Overview
Show people around the real screen, with this product tour for Solid with Ark UI. It points at Marrowmill, a product analytics dashboard, drawn in a hairline frame with a top bar and a settings cog, three metrics, a list of segments and a weekly report. A coachmark takes the four parts in turn: the stage dims, the part stays lit inside a ring, and the card says “2 of 4”, what the part is for, and gives Back, Next (Done on the last stop) and Skip, the only Shine Button being Next. The arrow keys step and Escape closes; afterwards the page says how it ended. Replay tour, an outline Button in the header, starts the real Tour with the same four steps. For preview the first stop is drawn open in place when the page loads. On a phone the card docks to the foot of the stage, and the real tour uses centred dialogs.
FAQ
Why is the tour already running, and what do I keep?
So you can see it without a click. On load the first stop is a copy drawn in place: a native dialog element that isn't modal, with the part ringed and the rest of the stage dimmed by a large shadow, so nothing is trapped, hidden or focused and the page around the preview keeps working. Replay tour starts the real Tour, which has its own backdrop, spotlight and card, and the copy stays closed until a reload. In your app keep the Tour and drop the copy: the "in-place" state, the coachmark, the ring and the Escape and arrow-key effect.
How does the tour find the parts it points at?
Each drawn part has a name in a data-region attribute, and each step's target is a small function that finds it. In your app give the real elements stable attributes and point the steps at them; the tour measures the element when its step begins, so a part that mounts late needs its step to wait for it.
How do the keys work?
In the real tour the arrow keys move between steps and Escape closes it, as the Tour does by default. In the copy shown on load they work while focus is somewhere inside the stage (a capture listener on the stage's own element), with the arrows swapped under right-to-left text. Skip, Back and Next are buttons in the tab order; Back waits quietly on the first stop.
What stays local in the demo, and how do I wire it?
All of it. The tour only walks the picture: nothing is saved and nothing is sent, and the result (“Tour finished in this demo”, “Tour skipped in this demo”) is a polite status line below the stage. In your app remember on your server that the person has seen the tour so it doesn't start again, and keep Replay tour in a help menu.
What happens on a phone?
The drawn parts are too small to point at, so below the medium breakpoint the real tour's steps are centred dialogs that name the part in words. The copy shown on load keeps the ring on the part and docks to the foot of the stage as a short card, moving to the top for the report so it never covers what it points at.