NextStep
A lightweight onboarding library for Next.js applications. Create engaging, interactive product tours with ease.
Get Started
Install NextStep
Add NextStep to your project with your preferred package manager
Built with
Next.js
Framer Motion
Radix UI
Tailwind CSS
Inspired by Onborda
NextStep is inspired by the great work of the Onborda project.
Quick Start Guide
- Install NextStep in your project using npm, yarn, or pnpm.
- Wrap your app with the NextStepProvider in your global layout:
import { NextStepProvider, NextStep } from 'nextstepjs'; export default function Layout({ children }) { return ( <NextStepProvider> <NextStep steps={steps}> {children} </NextStep> </NextStepProvider> ); }
- Define your steps:
import { Tour } from 'nextstepjs'; const steps : Tour[] = [ { tour: "mainTour", steps: [ { title: "Welcome", content: "Let's get started with NextStep!", selector: "#step1", // ... other step properties }, // ... more steps ] } ];
- Add id attributes to your HTML elements to target them in your steps.
- Use NextStep hook to control the tour from your components.
import { useNextStep } from 'nextstepjs'; const MyComponent = () => { const { startNextStep, closeNextStep, currentTour, currentStep, setCurrentStep, isNextStepVisible } = useNextStep(); const handleStartTour = () => { startNextStep("mainTour"); }; return ( <button onClick={handleStartTour}>Start Tour</button> ); };
- You need to add below code to your tailwind.config.js.
Optional: Create a custom Card to customize the appearance and behavior of NextStep to fit your app's needs.const config = { content: [ './node_modules/nextstepjs/dist/**/*.{js,ts,jsx,tsx}' ] }