Basic Setup for Remix

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.

Remix Setup

// root.tsx
import { NextStepReact, NextStepProvider } from 'nextstepjs';
import { useRemixAdapter } from 'nextstepjs/adapters/remix';
import { Outlet } from '@remix-run/react';

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={useRemixAdapter} steps={steps}>
        <Outlet />
      </NextStepReact>
    </NextStepProvider>
  );
}

Vite Configuration

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

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

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