onboard

Start by identifying the aha moment users should reach, then build a welcome screen with a clear value proposition, minimal account setup, and a guided first success. Keep it to 1-3 core concepts, make it skippable, and front-load the 20% of features that deliver 80% of value.

An empty state needs four elements: what will appear there, why it matters, a clear call to action like creating a first item or starting from a template, and visual interest such as an illustration. Optionally add contextual help like a short tutorial link.

For guided tours, use Intro.js, Shepherd.js, or React Joyride. For tooltips, Tippy.js and Popper.js are common choices. Keep tours to 3-7 steps, spotlight specific UI elements, and always include a skip option.

Track completion and dismissal state in localStorage, for example setting flags like onboarding-completed or per-feature tooltip-seen keys. Check these flags before rendering any tour or tooltip so returning users never see repeated onboarding.

Use guided tours for complex interfaces with many features or major product changes. Use contextual tooltips for individual feature discovery at the point of use. Prefer progressive, contextual teaching over upfront tours whenever possible.