Basic Setup for React Router

Wrap your application in NextStepProvider and NextStepReact, then supply the steps array to NextStep. See the Tour Steps page for more information about creating steps.

React Router Setup

//app/root.tsx
import { NextStepProvider, NextStepReact } from 'nextstepjs';
import { useReactRouterAdapter } from 'nextstepjs/adapters/react-router';
import { Outlet } from 'react-router-dom';

const steps = [
  {
    tour: "mainTour",
    steps: [
      {
        icon: "👋",
        title: "Welcome",
        content: "Let's get started with NextStep!",
        selector: "#step1",
        side: "right",
        showControls: true,
        showSkip: true
      },
      // More steps...
    ]
  }
];

export default function App() {
  return (
    <NextStepProvider>
      <NextStepReact navigationAdapter={useReactRouterAdapter} steps={steps}>
        <Outlet />
      </NextStepReact>
    </NextStepProvider>
  );
}

Vite Configuration

⚠️ Important: If you're using Vite with React Router, add the following configuration to your `vite.config.ts`:

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  ssr: {
    noExternal: ['nextstepjs', 'motion']
  }
});