Onboarding & Product Tours

Tour libraries

• ★ Driver.js — small, no dependencies, framework-agnostic. The default for product tours.
• ★ Shepherd.js — feature-rich, themable; includes tippy.js positioning.
• Onborda — Next.js / React-first, Tailwind-styled, animated; rising in 2026.
• react-joyride — React-only; mature, big install base.
• Intro.js — old-school; non-commercial license is free, commercial is paid.
• Reactour — React, smaller; less active.

Hosted onboarding platforms

• Userflow, Userpilot, Appcues, Pendo, Chameleon — full no-code onboarding suites; all paid, some free trials.
• PostHog — has flows / surveys / tooltips bundled; free tier covers small apps.

Empty states / hints / first-run UX

• Roll-your-own with Sonner + shadcn/ui's Card / Alert for "what to do next" prompts.
• @react-aria/tooltip for accessible coachmarks.
• Magic UI / Aceternity UI snippets for hero / first-run animations.

Patterns to know

• Progressive disclosure — don't tour everything; one ask per step.
• Empty-state CTAs > forced tours — most users skip tours; great empty states convert.
• Checklists — better retention than tours for multi-step setup. Build with PostHog or Userlist.
• Sticky nudges — for power features after first session, not on first run.

Pick this if…

• Default tiny tour: Driver.js.
• Tailwind-styled, modern Next.js: Onborda.
• Feature-rich themable tour: Shepherd.js.
• You need product analytics + tours together: PostHog.
• Marketing team owns onboarding flows: Userflow / Userpilot (paid).