Onboarding Tour | Zyeon UI

Preview in your theme

4-step tour over a fake app shell — every target is a real element with an id. stepIndex/onStepChange are controlled from this page, and the readout below mirrors every event the tour reports.

Acme Dash

Analytics

2,481

Revenue

$12,940

open: false · step: 1 / 4 · last event: —

Step 2 targets a selector that matches nothing (#tour-c2-does-not-exist). Next from step 1 silently advances to step 3 — no crash, no blank step; the component only closes itself (with a single console.warn) if every remaining target is unresolvable.

Search…

The target row sits below the fold of a 300px scroll container. scrollIntoView (default true) brings it into view before the spotlight measures it.

Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10

showProgress={false} + labels={{ next: "Got it", back: "Previous", skip: "No thanks", finish: "Done" }} — the minimal skin.

Widget A

Widget B

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro