Overlays & feedback

Tour / Onboarding Guide

Q: How do people describe a Tour / Onboarding Guide in plain words?

the dark overlay that lights up one button and explains it “Next 2 of 5” tips after a new feature ships that forced walkthrough pointing at UI with a bubble

Q: How do I implement a Tour / Onboarding Guide?

Add a feature tour: dim with overlay, spotlight the target (oversized box-shadow in scrim color on a relative target), popover with Next/Back/Skip and “2 / 5”, focus trap while open, remember completion so it doesn’t replay for returning users.

Dim the UI, spotlight a control, and step through coach-mark copy.

Also known as product tour · coach marks · feature walkthrough

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Tour / Onboarding Guide".

Add a feature tour: dim with overlay, spotlight the target (oversized box-shadow in scrim color on a relative target), popover with Next/Back/Skip and “2 / 5”, focus trap while open, remember completion so it doesn’t replay for returning users.

Anatomy:
- spotlight / cutout: Hole in the scrim; oversized box-shadow trick is common.
- step popover: Explains the cutout with Next/Back.
- step indicator: “2 / 5” so people know how long this lasts.
- skip: Must be obvious—never trap people.

Preferred API / pattern: `react-joyride / custom coach marks`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Teaching every feature on day one
○Avoid: Hidden or missing Skip
○Avoid: Replaying for power users
○Avoid: Spotlight misaligned after scroll/resize

In plain wordsHow people search for it

“the dark overlay that lights up one button and explains it”““Next 2 of 5” tips after a new feature ships”“that forced walkthrough pointing at UI with a bubble”

AnatomyOpen for part names

spotlight / cutout: Hole in the scrim; oversized box-shadow trick is common.
step popover: Explains the cutout with Next/Back.
step indicator: “2 / 5” so people know how long this lasts.
skip: Must be obvious—never trap people.

How to write itOpen for stack patterns

Web (HTML/CSS)dialog + spotlight (box-shadow / clip-path)

React + Tailwind + shadcn/uireact-joyride / custom coach marks

SwiftUIoverlay + anchor preferences

Ant Design<Tour steps={[{ target, title }]} />

Notes

Annoying when timed wrong: eight steps on first login get skipped forever. Trigger in context—first visit to Reports explains Reports once. Persist “seen” server-side or in storage. Spotlight with a huge scrim-colored box-shadow is easier to maintain than complex clip-paths.

Common mistakesHumans and models trip here

Teaching every feature on day one: completion rates crater—context-trigger single tips.
Hidden or missing Skip: resentment machine.
Replaying for power users: persist seen state.
Spotlight misaligned after scroll/resize: remeasure on each step.

More failure symptoms on AI broke it.

Related patterns

Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.Tooltip / PopoverA small floating tip (tooltip) or richer bubble (popover) anchored to a control.Modal DialogA centered window that blocks the page until the user responds.Steps / StepperVisualize a multi-step flow: done, current, and upcoming.

Spotted a wrong name or missing pattern?

Message on X