All Recipes

Each recipe is one job, with a live demo where it helps and the code to copy. The guides explain the features; the recipes put them together.

Onboard New Users

• First-Run Onboarding: show a tour once on the first visit, with a replay button.
• Getting-Started Checklist: a checklist whose items each launch a short tour.
• Announce a Feature: point out something new once, or with a hint that stays dismissed.
• Start From a Help Menu: “Take the tour” starts at the step for the current screen.

Teach a Task

• Teach a Form: explain each field, or move on only when a field is valid.
• Walk Through a Menu: open a dropdown, pick an item, recover when it closes.
• Steps Inside a Dialog: run steps inside a modal and come back to the page.
• Wait for a Save: hold a step until your app finishes, then show it’s done.
• Right-Click and Double-Click Steps: accept only the gesture the step teaches.

Keep Progress

• Resume a Tour: pick up at the step where the user left.
• Multi-Page Tours: continue a tour after a page load or route change.

Control How a Tour Ends

• Confirm Before Closing: ask before an early exit, or don’t allow one.
• Track Tour Analytics: finished or closed, and the step where people quit.

Fit Your App

• React and Vue: set up and clean up in React, Vue and Next.js.
• Custom Buttons: add Skip and Restart, rename and translate buttons.
• Match Your Brand: dark and brand themes with a class and CSS variables.