onboard

Start by identifying the user's goal, experience level, and the key action defining success. Then introduce one to three core concepts interactively, guide users to a real first success, and always provide a skip option for experienced users.

A good empty state explains what will appear there, why it matters, and how to get started with a clear call to action. Add an illustration for visual interest and offer templates or examples so users can create their first item immediately.

Intro.js, Shepherd.js, and React Joyride handle guided tours with step spotlighting, while Tippy.js and Popper.js power contextual tooltips. Keep tours to three to seven steps and make them dismissable and replayable.

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

Avoid tours for simple interfaces where contextual tooltips or empty states suffice, and never block product access behind a mandatory tour. Tours fit complex interfaces, major redesigns, or domain-specific tools requiring background knowledge.