What it looks like
The interface dims under a navy veil, and only a rounded cutout stays lit around the element being explained, outlined in white. Next to it appears a white popover with an arrow, the step count, a title, short text, a segmented progress bar and buttons to go back and forward. With each step, the cutout glides with a spring motion to the next target, and the area scrolls by itself, inside the component, when the target is out of view. The highlighted element stays clickable; clicking outside it makes the popover shake gently.
You may be looking for this if you asked for something like
- show new users where everything is in my app
- that step-by-step thing that dims the screen and highlights one button at a time
- a first-run tutorial for my SaaS dashboard
- a tooltip pointing at a new feature with an arrow
- guide customers until they click to create their first project
- a tour people can skip and pick up later where they left off
- walk my team through the internal system without a video
Also known as
- onboarding tour
- product tour
- guided tour
- walkthrough
- coach marks
- spotlight tour
- feature tour
When to use
- First use of a SaaS product or admin dashboard
- Launching a new feature that people need to discover
- Team training on an internal system
- Flows where people must click something to continue, like creating a first project
When to avoid
- Landing pages and content sites, where a tour interrupts reading
- Simple interfaces, where clear labels make a step-by-step tour unnecessary
How to ask your AI
Create a first-run guided tour for my dashboard: it dims the screen and cuts out the element of each step with rounded corners, a popover with an arrow and progress bar, scrolling to the target, arrow keys, Enter and Esc, skip and resume, and no animation for reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Onboarding Tour
Does Onboarding Tour remember where people stopped?
Yes, if you want it to. With the storageKey prop, Onboarding Tour saves in localStorage whether the tour was skipped or finished and which step it was on, so people who skipped can resume from there. Without storageKey nothing is saved, and if the browser blocks storage the tour keeps working without saving progress.
How do I point Onboarding Tour at elements on my screen?
Each Onboarding Tour step takes a selector in target, looked up inside the component, plus a title and text. Mark your elements with attributes such as data-tour and turn off the demo. Steps without a target are centered, steps with when only show when the condition holds, and advanceOn set to click moves on when the target is clicked.
Does Onboarding Tour work with a keyboard and reduced motion?
Yes. With focus on Onboarding Tour, the right arrow or Enter moves forward, the left arrow goes back and Esc pauses the tour. Each step change is announced to screen readers. With reduced motion on, the cutout jumps straight to the target without the spring, and the popover does not shake.
