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

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:

App Router: Global `layout.tsx`

import { NextStepProvider, NextStep } from 'nextstepjs';

export default function Layout({ children }) {
  return (
    <NextStepProvider>
      <NextStep steps={steps}>
        {children}
      </NextStep>
    </NextStepProvider>
  );
}

Pages Router: `_app.tsx`

import { NextStepProvider, NextStep } from 'nextstepjs';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <NextStepProvider>
      <NextStep steps={steps}>
        <Component {...pageProps} />
      </NextStep>
    </NextStepProvider>
  );
}

Troubleshooting for Pages Router

If you encounter an error related to module exports when using the Pages Router, it is likely due to a mismatch between ES modules (which use `export` statements) and CommonJS modules (which use `module.exports`). The `nextstepjs` package uses ES module syntax, but your Next.js project might be set up to use CommonJS.

To resolve this issue, ensure that your Next.js project is configured to support ES modules. You can do this by updating your `next.config.js` file to include the following configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    esmExternals: true,
  },
  transpilePackages: ['nextstepjs'],
};

export default nextConfig;

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}'
  ]
}
```