Product Tour Onboarding Block for React

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.

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.

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.

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.

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.

The Tour reports how it ended. Done or Next on the last stop finishes it; Skip and Escape before the last stop skip it; Escape on the last stop counts as finished, since every stop has been seen. Either way focus goes back to Replay tour.