NextStep

https://nextstepjs.com/docs
Admin
NextStep is a lightweight onboarding library for Next.js that enables developers to create guided...
Tokens:42,663
Snippets:119
Trust Score:5.1
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install NextStep and Motion with bun

Source: https://nextstepjs.com/docs

Installs the nextstepjs and motion packages into your Next.js project using bun. bun is a fast JavaScript runtime and toolkit.

```shell
bun add nextstepjs motion
```

--------------------------------

### Basic React Setup with NextStep.js

Source: https://nextstepjs.com/docs/react/basic-setup

This snippet demonstrates the core setup for NextStep.js in a React application. It involves importing necessary components from 'nextstepjs' and wrapping the application content within `NextStepProvider` and `NextStepReact`, while defining the tour steps.

```jsx
import { NextStepProvider, NextStepReact } from 'nextstepjs';

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...
    ]
  }
];

function App() {
  return (
    <NextStepProvider>
      <NextStepReact steps={steps}>
        <YourAppContent />
      </NextStepReact>
    </NextStepProvider>
  );
}
```

--------------------------------

### Install NextStep and Motion with npm, pnpm, yarn, or bun

Source: https://nextstepjs.com/docs/nextjs

Install the nextstepjs and motion packages into your Next.js project using your preferred package manager. This setup is essential for integrating NextStep's features.

```bash
# npm
npm i nextstepjs motion

# pnpm
pnpm add nextstepjs motion

# yarn
yarn add nextstepjs motion

# bun
bun add nextstepjs motion
```

--------------------------------

### Remix Root Setup with NextStep.js

Source: https://nextstepjs.com/docs/remix/basic-setup

Configures the root component of a Remix application to use NextStep.js. It wraps the application with NextStepProvider and NextStepReact, providing tour steps and a Remix navigation adapter. Ensure 'nextstepjs' is installed.

```typescript
// 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>
  );
}
```

--------------------------------

### Install NextStep and Motion with npm

Source: https://nextstepjs.com/docs

Installs the nextstepjs and motion packages into your Next.js project using npm. This is the standard method for Node.js package management.

```shell
npm i nextstepjs motion
```

--------------------------------

### Complete Next.js useNextStep Hook Example

Source: https://nextstepjs.com/docs/nextjs/useNextStep

A comprehensive example demonstrating the integration and usage of all properties and methods exposed by the `useNextStep` hook within a Next.js component. It includes buttons for starting, skipping, and jumping to specific steps, along with displaying current tour status.

```javascript
'use client';
import { useNextStep } from 'nextstepjs';

export default function TourController() {
  const { 
    startNextStep, 
    closeNextStep, 
    currentTour, 
    currentStep, 
    setCurrentStep, 
    isNextStepVisible 
  } = useNextStep();

  const handleStartTour = () => {
    startNextStep('welcomeTour');
  };

  const handleSkipTour = () => {
    closeNextStep();
  };

  const handleJumpToStep = () => {
    setCurrentStep(2);
  };

  return (
    <div className="tour-controls">
      <button onClick={handleStartTour}>Start Tour</button>
      
      {isNextStepVisible && (
        <>
          <button onClick={handleSkipTour}>Skip Tour</button>
          <button onClick={handleJumpToStep}>Jump to Step 3</button>
          <div className="tour-status">
            <p>Current tour: {currentTour}</p>
            <p>Current step: {currentStep + 1}</p>
          </div>
        </>
      )}
    </div>
  );
}
```

--------------------------------

### Install NextStep and Motion dependencies

Source: https://nextstepjs.com/docs/react-router

Installs the core nextstepjs library and the motion animation library. This command is required for all supported frameworks including Next.js, React, React Router, and Remix.

```bash
# npm
npm i nextstepjs motion

# pnpm
pnpm add nextstepjs motion

# yarn
yarn add nextstepjs motion

# bun
bun add nextstepjs motion
```

--------------------------------

### Install NextStep and Motion with pnpm

Source: https://nextstepjs.com/docs

Installs the nextstepjs and motion packages into your Next.js project using pnpm. pnpm is a performant package manager for Node.js.

```shell
pnpm add nextstepjs motion
```

--------------------------------

### Practical Next.js Example: Help Button with useNextStep

Source: https://nextstepjs.com/docs/nextjs/useNextStep

A practical implementation of the `useNextStep` hook in a Next.js application to create a 'Help' button. Clicking this button triggers the start of a tour named 'helpTour', demonstrating event handling and tour initiation.

```javascript
'use client';

import { useNextStep } from 'nextstepjs';
import { Button } from '@/components/ui/button';
import { HelpCircle } from 'lucide-react';

export function HelpButton() {
  const { startNextStep } = useNextStep();
  
  return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => startNextStep('helpTour')}
      aria-label="Help"
    >
      <HelpCircle className="h-4 w-4" />
    </Button>
  );
}
```

--------------------------------

### NextStep.js Animation Examples

Source: https://nextstepjs.com/docs/nextjs/animations

Provides various examples of animation configurations for NextStep.js tours using the `cardTransition` prop. These examples showcase different animation styles including smooth fade, bouncy spring, quick snap, and delayed appearance, utilizing Framer Motion's capabilities.

```javascript
cardTransition={{ 
  ease: 'easeInOut', 
  duration: 0.5 
}}
```

```javascript
cardTransition={{
  type: 'spring',
  stiffness: 300,
  damping: 20
}}
```

```javascript
cardTransition={{
  ease: 'backOut',
  duration: 0.3
}}
```

```javascript
cardTransition={{
  ease: 'easeOut',
  duration: 0.4,
  delay: 0.2
}}
```

--------------------------------

### Install NextStep and Motion with yarn

Source: https://nextstepjs.com/docs

Installs the nextstepjs and motion packages into your Next.js project using yarn. yarn is another popular package manager for Node.js.

```shell
yarn add nextstepjs motion
```

--------------------------------

### Next.js Pages Router Setup with NextStepProvider

Source: https://nextstepjs.com/docs/nextjs/basic-setup

Sets up NextStep.js for a Next.js application using the Pages Router by wrapping the main application component in `NextStepProvider` and `NextStep` within the `_app.tsx` file. This requires the `nextstepjs` package.

```typescript
import { NextStepProvider, NextStep } from 'nextstepjs';

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

--------------------------------

### NextStep.js onStart Callback Example

Source: https://nextstepjs.com/docs/react/callbacks

An example of the `onStart` callback for NextStep.js, which is executed when a tour begins. It logs the tour name to the console and includes comments for potential analytics tracking or state updates.

```typescript
onStart: (tourName: string | null) => {
  console.log(`Tour ${tourName} started`);
  // Track analytics, set user state, etc.
}
```

--------------------------------

### useNextStep Hook

Source: https://nextstepjs.com/docs/remix/api

Provides programmatic control over onboarding tours, allowing you to start, stop, and navigate through steps.

```APIDOC
## useNextStep Hook

### Description
The `useNextStep` hook is a React hook that provides direct, programmatic control over the onboarding tour functionality. It allows you to initiate tours, advance through steps, close the tour, and monitor its current state from within your React components.

### Return Values

#### `startNextStep`
- **Type**: `(tourName: string) => void`
- **Description**: A function to start a specific onboarding tour. Pass the `tour` name (defined in the `Tour` object) as an argument.

#### `closeNextStep`
- **Type**: `() => void`
- **Description**: A function to stop the currently active onboarding tour.

#### `currentTour`
- **Type**: `string | null`
- **Description**: The name of the currently active tour. Returns `null` if no tour is active.

#### `currentStep`
- **Type**: `number`
- **Description**: The index of the current step in the active tour. This is a zero-based index.

#### `setCurrentStep`
- **Type**: `(step: number, delay?: number) => void`
- **Description**: Manually sets the current step of the active tour to a specified index. An optional `delay` (in milliseconds) can be provided to animate the transition.

#### `isNextStepVisible`
- **Type**: `boolean`
- **Description**: A boolean value indicating whether the onboarding tour overlay is currently visible.

```

--------------------------------

### Starting a Specific Tour with useNextStep

Source: https://nextstepjs.com/docs/react/useNextStep

Illustrates how to programmatically start a specific tour by providing its name to the startNextStep function. If no name is given, it defaults to the first tour defined.

```javascript
// Start a specific tour
startNextStep('tourName');
```

--------------------------------

### Example Complete Steps Array for Next.js Tours

Source: https://nextstepjs.com/docs/nextjs/tour-steps

Provides a comprehensive example of a 'steps' array for NextStep.js, showcasing multiple tours with detailed step configurations. It includes properties like icon, title, content, selector, side, controls, and routing.

```javascript
import { Tour } from 'nextstepjs';

const steps: Tour[] = [
  {
    tour: 'firsttour',
    steps: [
      {
        icon: <>👋</>,
        title: 'Tour 1, Step 1',
        content: <>First tour, first step</>,
        selector: '#tour1-step1',
        side: 'top',
        showControls: true,
        showSkip: true,
        pointerPadding: 10,
        pointerRadius: 10,
        nextRoute: '/foo',
        prevRoute: '/bar',
      },
      {
        icon: <>🎉</>,
        title: 'Tour 1, Step 2',
        content: <>First tour, second step</>,
        selector: '#tour1-step2',
        side: 'top',
        showControls: true,
        showSkip: true,
        pointerPadding: 10,
        pointerRadius: 10,
        viewportID: 'scrollable-viewport',
      },
    ],
  },
  {
    tour: 'secondtour',
    steps: [
      {
        icon: <>🚀</>,
        title: 'Second tour, Step 1',
        content: <>Second tour, first step!</>,
        selector: '#nextstep-step1',
        side: 'top',
        showControls: true,
        showSkip: true,
        pointerPadding: 10,
        pointerRadius: 10,
        nextRoute: '/foo',
        prevRoute: '/bar',
      },
    ],
  },
];

export default steps;
```

--------------------------------

### Configure and Start Interactive Tour with NextStep.js

Source: https://nextstepjs.com/docs/react/tour-steps

This snippet shows how to define tour steps and initiate a tour using the useNextStep hook. It requires the 'nextstepjs' library. The tour configuration includes step details like content, selectors, and display options. The component uses the hook to get a function to start the tour by its ID.

```typescript
// In your steps.tsx file
{
  tour: 'docs-demo',
  steps: [
    {
      icon: <>👋</>,
      title: 'First Step',
      content: <>This is the first step of our demo tour</>,
      selector: '#docs-demo-step1',
      side: 'bottom',
      showControls: true,
      showSkip: true,
      pointerPadding: 10,
      pointerRadius: 10,
    },
    {
      icon: <>🎉</>,
      title: 'Second Step',
      content: <>This is the second step of our demo tour</>,
      selector: '#docs-demo-step2',
      side: 'bottom',
      showControls: true,
      showSkip: true,
      pointerPadding: 10,
      pointerRadius: 10,
    },
  ],
}

// In your component
import { useNextStep } from 'nextstepjs';

const YourComponent = () => {
  const { startNextStep } = useNextStep();
  
  return (
    <Button onClick={() => startNextStep('docs-demo')}>
      Start Demo Tour
    </Button>
  );
};

```

--------------------------------

### Next.js App Router Setup with NextStepProvider

Source: https://nextstepjs.com/docs/nextjs/basic-setup

Configures NextStep.js for a Next.js application using the App Router by wrapping the application in `NextStepProvider` and `NextStep` components within the global `layout.tsx` file. It requires the `nextstepjs` package.

```typescript
import { NextStepProvider, NextStep } from 'nextstepjs';

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 Layout({ children }) {
  return (
    <NextStepProvider>
      <NextStep steps={steps}>
        {children}
      </NextStep>
    </NextStepProvider>
  );
}
```

--------------------------------

### Vite Configuration for Next.js Navigation Mock

Source: https://nextstepjs.com/docs/react/basic-setup

This section provides the necessary configuration for Vite when using NextStep.js with React. It includes creating a mock file for Next.js navigation and updating `vite.config.ts` to alias 'next/navigation' to the mock file, ensuring proper build behavior.

```typescript
// src/mocks/next-navigation.ts
// Mock for Next.js navigation to prevent build errors with nextstepjs

export const useRouter = () => {
  return {
    push: () => {},
    replace: () => {},
    prefetch: () => {},
    back: () => {},
    forward: () => {},
    refresh: () => {},
  };
};

export const usePathname = () => {
  return '';
};

export const useSearchParams = () => {
  return new URLSearchParams();
};

export const useParams = () => {
  return {};
};
```

```javascript
// vite.config.ts
import path from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      // Mock Next.js navigation imports that nextstepjs might try to access
      {
        find: 'next/navigation',
        replacement: path.join(process.cwd(), 'src/mocks/next-navigation.ts'),
      },
    ]
  },
  ssr: {
    noExternal: ['nextstepjs', 'motion']
  }
});
```

--------------------------------

### Basic React Router Setup for NextStep.js

Source: https://nextstepjs.com/docs/react-router/basic-setup

This snippet shows how to wrap your React application with NextStepProvider and NextStepReact, providing the necessary navigation adapter and tour steps for React Router.

```tsx
//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>
  );
}
```

--------------------------------

### Start Tour from React Component using useNextStep Hook (nextstepjs)

Source: https://nextstepjs.com/docs/remix/tour-steps

Shows how to integrate the `useNextStep` hook from the `nextstepjs` library into a React component to trigger the interactive tour. It imports the hook and uses its `startNextStep` function within a button's `onClick` event handler.

```javascript
import { useNextStep } from 'nextstepjs';

const YourComponent = () => {
  const { startNextStep } = useNextStep();
  
  return (
    <Button onClick={() => startNextStep('docs-demo')}> 
      Start Demo Tour
    </Button>
  );
};

```

--------------------------------

### Quick Snap Animation Example for NextStep.js

Source: https://nextstepjs.com/docs/react/animations

Shows a configuration for a quick snap animation effect in NextStep.js tours. This example utilizes the 'backOut' easing function with a short duration of 0.3 seconds.

```javascript
cardTransition={{
  ease: 'backOut',
  duration: 0.3
}}
```

--------------------------------

### Mock Next.js Navigation for Vite

Source: https://nextstepjs.com/docs/react-router/basic-setup

Creates a mock file for Next.js navigation functions, essential for preventing build errors when using NextStep.js with Vite and React Router.

```ts
//src/mocks/next-navigation.ts
// Mock for Next.js navigation to prevent build errors with nextstepjs
// This file is used to mock Next.js imports when using nextstepjs in a Vite app

export const useRouter = () => {
  return {
    push: () => {},
    replace: () => {},
    prefetch: () => {},
    back: () => {},
    forward: () => {},
    refresh: () => {},
  };
};

export const usePathname = () => {
  return '';
};

export const useSearchParams = () => {
  return new URLSearchParams();
};

export const useParams = () => {
  return {};
};
```

--------------------------------

### Conditional Tour Start with useEffect in Next.js

Source: https://nextstepjs.com/docs/nextjs/useNextStep

Shows how to use the `useNextStep` hook in conjunction with React's `useEffect` hook to conditionally start a tour, such as an onboarding tour for new users. This pattern ensures tours are initiated based on specific application states or user properties.

```javascript
'use client';

import { useEffect } from 'react';
import { useNextStep } from 'nextstepjs';

export function OnboardingWrapper({ children, isNewUser }) {
  const { startNextStep } = useNextStep();
  
  useEffect(() => {
    // Start the onboarding tour for new users
    if (isNewUser) {
      startNextStep('onboardingTour');
    }
  }, [isNewUser, startNextStep]);
  
  return <>{children}</>;
}
```

--------------------------------

### Remix Navigation Adapter Setup - NextStepJS

Source: https://nextstepjs.com/docs/remix/routing

Integrates the NextStepJS tour functionality with Remix's navigation system. It requires importing `NextStepProvider`, `NextStepReact`, and `useRemixAdapter` from the `nextstepjs` library. This setup ensures seamless page transitions within tours in a Remix application.

```typescript
// In your root.tsx
import { NextStepProvider, NextStepReact } from 'nextstepjs';
import { useRemixAdapter } from 'nextstepjs/adapters/remix';
import steps from './steps';

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

--------------------------------

### useNextStep Hook

Source: https://nextstepjs.com/docs/react/api

The useNextStep hook provides programmatic control over the tour, allowing you to start, stop, skip, or navigate through steps.

```APIDOC
## useNextStep Hook

### Description
The `useNextStep` hook is a React hook that provides direct, programmatic control over the onboarding tour's lifecycle and state. It allows you to initiate tours, advance through steps, and monitor the tour's current status from within your React components.

### Return Values

#### `startNextStep`
- **Type**: `(tourName: string) => void`
- **Description**: A function to start a specific onboarding tour. Pass the `tour` name (defined in the `Tour` object) as an argument.

#### `closeNextStep`
- **Type**: `() => void`
- **Description**: A function to stop the currently active onboarding tour and hide the overlay.

#### `currentTour`
- **Type**: `string | null`
- **Description**: The name of the currently active tour. Returns `null` if no tour is active.

#### `currentStep`
- **Type**: `number`
- **Description**: The index of the current step within the active tour. This is a zero-based index.

#### `setCurrentStep`
- **Type**: `(step: number, delay?: number) => void`
- **Description**: Programmatically sets the current step of the tour to a specific index. An optional `delay` (in milliseconds) can be provided to animate the transition.

#### `isNextStepVisible`
- **Type**: `boolean`
- **Description**: A boolean value indicating whether the NextStep.js tour overlay is currently visible on the screen.

```

--------------------------------

### Tour Object Structure

Source: https://nextstepjs.com/docs/remix/api

Organizes multiple steps into a single, named onboarding tour.

```APIDOC
## Tour Object Structure

### Description
The `Tour` object is used to group a collection of `Step` objects into a single, named onboarding tour. This allows you to define and manage multiple distinct tours within your application.

### Properties

#### `tour`
- **Type**: `string`
- **Description**: A unique identifier string for this tour. This name is used to reference and start the tour programmatically.

#### `steps`
- **Type**: `Step[]`
- **Description**: An array of `Step` objects that define the sequence and content of each step within this tour.

```

--------------------------------

### Button Click Validation Example

Source: https://nextstepjs.com/docs/nextjs/validation

Illustrates validation based on a user action, specifically clicking a button. It checks a flag in localStorage to ensure a 'Get Started' button has been clicked before proceeding. Includes a handler to set the flag.

```javascript
const buttonClickValidation = {
  validation: () => {
    return localStorage.getItem('button-clicked') === 'true';
  },
  validationMessage: 'Please click the "Get Started" button to continue.',
};

// In your component, set the flag when button is clicked
const handleButtonClick = () => {
  localStorage.setItem('button-clicked', 'true');
  // Your button logic here
};
```

--------------------------------

### Start Tour with useNextStep Hook in React

Source: https://nextstepjs.com/docs/nextjs/tour-steps

Shows how to integrate the `useNextStep` hook from the `nextstepjs` library into a React component. The hook provides a `startNextStep` function, which is used here to initiate the 'docs-demo' tour when a button is clicked.

```javascript
import { useNextStep } from 'nextstepjs';

const YourComponent = () => {
  const { startNextStep } = useNextStep();
  
  return (
    <Button onClick={() => startNextStep('docs-demo')}> 
      Start Demo Tour
    </Button>
  );
};
```

--------------------------------

### Next.js Configuration for ES Modules with NextStep.js

Source: https://nextstepjs.com/docs/nextjs/basic-setup

Resolves module export errors in Next.js Pages Router when using NextStep.js by configuring `next.config.js` to support ES modules. This ensures compatibility between the `nextstepjs` package (using ES modules) and the Next.js project.

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

export default nextConfig;
```

--------------------------------

### Configure React Routing Demo Steps

Source: https://nextstepjs.com/docs/react/routing

Defines the configuration for a React routing demo using NextStepJS. It specifies tour details, individual steps with icons, titles, content, element selectors, and navigation routes (`nextRoute`, `prevRoute`). This setup enables interactive navigation within the application during a guided tour.

```typescript
import React from 'react';

// In your steps.tsx file
const routingDemoConfig = {
  tour: 'react-routing-demo',
  steps: [
    {
      icon: <>👋</>,
      title: 'Routing Demo',
      content: <>This is the first step of our routing demo. Click next to navigate to the homepage.</>,
      selector: '#routing-demo-step',
      side: 'bottom',
      showControls: true,
      showSkip: true,
      nextRoute: '/',
    },
    {
      icon: <>❤️</>,
      title: 'Support the Developer',
      content: <>We've navigated to the homepage. Please consider supporting the developer if you find NextStep useful. <br /> <br /> Click next to navigate back to the routing documentation.</>,
      selector: '#buy-me-a-coffee-button',
      side: 'right',
      showControls: true,
      showSkip: true,
      prevRoute: '/docs/react/routing',
      nextRoute: '/docs/react/routing',
    },
    {
      icon: <>🎉</>,
      title: 'Back to Docs',
      content: <>We've navigated back to the routing documentation. You've completed the routing demo!</>,
      selector: '#routing-demo-step',
      side: 'bottom',
      showControls: true,
      showSkip: true,
      prevRoute: '/',
    },
  ],
};

export default routingDemoConfig;

```

--------------------------------

### Mock Next.js Navigation for Vite

Source: https://nextstepjs.com/docs/remix/basic-setup

Creates mock functions for Next.js navigation hooks (`useRouter`, `usePathname`, `useSearchParams`, `useParams`) to prevent build errors when using Vite with NextStep.js. This mock file should be placed at 'src/mocks/next-navigation.ts'.

```typescript
// src/mocks/next-navigation.ts
// Mock for Next.js navigation to prevent build errors with nextstepjs

export const useRouter = () => {
  return {
    push: () => {},
    replace: () => {},
    prefetch: () => {},
    back: () => {},
    forward: () => {},
    refresh: () => {},
  };
};

export const usePathname = () => {
  return '';
};

export const useSearchParams = () => {
  return new URLSearchParams();
};

export const useParams = () => {
  return {};
};
```

--------------------------------

### Create Dark Mode Supported Custom Tour Card (React)

Source: https://nextstepjs.com/docs/react-router/dark-mode

This example shows how to create a custom tour card component for NextStepjs that supports dark mode. It uses a hypothetical 'useTheme' hook to get the current theme and applies conditional styling to the card's background and text.

```jsx
'use client';

import React from 'react';
import { Step } from 'nextstepjs';
import { useTheme } from 'your-theme-hook'; // Your theme hook

interface DarkModeCardProps {
  step: Step;
  currentStep: number;
  totalSteps: number;
  nextStep: () => void;
  prevStep: () => void;
  skipTour: () => void;
  arrow: React.ReactNode;
}

const DarkModeCard = ({
  step,
  currentStep,
  totalSteps,
  nextStep,
  prevStep,
  skipTour,
  arrow,
}: DarkModeCardProps) => {
  const { isDarkMode } = useTheme(); // Get theme from your context
  
  return (
    <div
      className={`${ 
        isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
      } rounded-lg shadow-lg p-6 max-w-md`}
    >
      <div className="flex items-center gap-3 mb-4">
        {step.icon && <div className="text-2xl">{step.icon}</div>}
        <h3 className="text-xl font-bold">{step.title}</h3>
      </div>
      
      <div className="mb-6">{step.content}</div>
      
      {arrow}
      
      <div className="flex justify-between items-center">
        <div className="text-sm">
          Step {currentStep + 1} of {totalSteps}
        </div>
        
        <div className="flex gap-2">
          {currentStep > 0 && (
            <button
              onClick={prevStep}
              className={`px-4 py-2 ${ 
                isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'
              } rounded`}
            >
              Previous
            </button>
          )}
          
          <button
            onClick={nextStep}
            className={`px-4 py-2 ${ 
              isDarkMode ? 'bg-blue-600' : 'bg-blue-500'
            } text-white rounded`}
          >
            {currentStep === totalSteps - 1 ? 'Finish' : 'Next'}
          </button>
          
          {step.showSkip && (
            <button
              onClick={skipTour}
              className={`px-4 py-2 ${ 
                isDarkMode ? 'text-gray-400' : 'text-gray-500'
              }`}
            >
              Skip
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default DarkModeCard;

```

--------------------------------

### Asynchronous Validation Example

Source: https://nextstepjs.com/docs/nextjs/validation

Provides an example of asynchronous validation using `fetch` to call an API endpoint. It validates user data by checking the response from `/api/validate-user`. This is suitable for server-side or external validations.

```javascript
const asyncValidation = {
  validation: async () => {
    try {
      const response = await fetch('/api/validate-user');
      const data = await response.json();
      return data.isValid;
    } catch (error) {
      return false;
    }
  },
  validationMessage: 'Please complete the required verification.',
};
```

--------------------------------

### Basic Usage of useNextStep Hook in Next.js

Source: https://nextstepjs.com/docs/nextjs/useNextStep

Demonstrates the fundamental import and usage of the `useNextStep` hook to start and close tours programmatically within a Next.js component. It shows how to bind tour control actions to button clicks.

```javascript
import { useNextStep } from 'nextstepjs';

function YourComponent() {
  const { startNextStep, closeNextStep } = useNextStep();
  
  const handleStartTour = () => {
    startNextStep('tourName');
  };
  
  const handleCloseTour = () => {
    closeNextStep();
  };
  
  return (
    <div>
      <button onClick={handleStartTour}>Start Tour</button>
      <button onClick={handleCloseTour}>Close Tour</button>
    </div>
  );
}
```

--------------------------------

### Form Field Validation Example

Source: https://nextstepjs.com/docs/nextjs/validation

An example of a validation object for form fields. It checks if an input element with the ID 'username' has a value of at least 3 characters. This is useful for basic input validation.

```javascript
const formValidation = {
  validation: () => {
    const input = document.getElementById('username') as HTMLInputElement;
    return input && input.value.length >= 3;
  },
  validationMessage: 'Please enter a username with at least 3 characters.',
};
```

--------------------------------

### Smooth Fade Animation Example for NextStep.js

Source: https://nextstepjs.com/docs/react/animations

Provides an example configuration for a smooth fade animation using the `cardTransition` prop in NextStep.js. This configuration specifies an 'easeInOut' easing function and a duration of 0.5 seconds.

```javascript
cardTransition={{ 
  ease: 'easeInOut', 
  duration: 0.5 
}}
```

--------------------------------

### Bouncy Spring Animation Example for NextStep.js

Source: https://nextstepjs.com/docs/react/animations

Illustrates how to implement a bouncy spring animation for tour steps in NextStep.js using the `cardTransition` prop. This example uses a 'spring' type with specified stiffness and damping values.

```javascript
cardTransition={{
  type: 'spring',
  stiffness: 300,
  damping: 20
}}
```

--------------------------------

### Initializing NextStep.js with Callbacks in React

Source: https://nextstepjs.com/docs/nextjs/callbacks

Demonstrates how to integrate NextStep.js callbacks within a React application, specifically within a Next.js layout or app file. It shows the necessary imports and how to pass callback functions as props to the NextStep component during its initialization.

```typescript
// In your layout.tsx or app.tsx
import { NextStepProvider, NextStep } from 'nextstepjs';
import steps from '@/lib/steps';

export default function RootLayout({ children }) {
  return (
    <NextStepProvider>
      <NextStep 
        steps={steps}
        onStart={(tourName) => {
          console.log(`Tour ${tourName} started`);
        }}
        onComplete={(tourName) => {
          console.log(`Tour ${tourName} completed`);
        }}
        onSkip={(step, tourName) => {
          console.log(`Tour ${tourName} skipped at step ${step}`);
        }}
        onStepChange={(step, tourName) => {
          console.log(`Step changed to ${step} in ${tourName}`);
        }}
      >
        {children}
      </NextStep>
    </NextStepProvider>
  );
}
```

--------------------------------

### NextStep.js onComplete Callback Example

Source: https://nextstepjs.com/docs/react/callbacks

An example of the `onComplete` callback for NextStep.js, triggered when a tour is successfully finished. It logs the tour name and provides placeholders for actions like updating user preferences or displaying a completion message.

```typescript
onComplete: (tourName: string | null) => {
  console.log(`Tour ${tourName} completed`);
  // Update user preferences, show completion message, etc.
}
```

--------------------------------

### Vite Configuration for NextStep.js in Remix

Source: https://nextstepjs.com/docs/remix/basic-setup

Configures Vite to alias 'next/navigation' to a mock file, resolving potential build issues when using NextStep.js with Remix. It also ensures 'nextstepjs' and 'motion' are not externalized for SSR. Requires Vite and React plugins.

```typescript
// vite.config.ts
import path from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      // Mock Next.js navigation imports that nextstepjs might try to access
      {
        find: 'next/navigation',
        replacement: path.join(process.cwd(), 'src/mocks/next-navigation.ts'),
      },
    ]
  },
  ssr: {
    noExternal: ['nextstepjs', 'motion']
  }
});
```
Tokens:
Raw