Custom Card Components

One of the most powerful customization features in NextStepjs is the ability to provide your own card component. This allows you to completely control the appearance of tour steps.

Basic Custom Card

Here's an example of a basic custom card component:

'use client';

import React from 'react';
import { Step } from 'nextstepjs';

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

const CustomCard = ({
  step,
  currentStep,
  totalSteps,
  nextStep,
  prevStep,
  skipTour,
  arrow,
}: CustomCardProps) => {
  return (
    <div className="bg-white dark:bg-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 bg-gray-200 dark:bg-gray-700 rounded"
            >
              Previous
            </button>
          )}
          
          <button
            onClick={nextStep}
            className="px-4 py-2 bg-blue-500 text-white rounded"
          >
            {currentStep === totalSteps - 1 ? 'Finish' : 'Next'}
          </button>
          
          {step.showSkip && (
            <button
              onClick={skipTour}
              className="px-4 py-2 text-gray-500 dark:text-gray-400"
            >
              Skip
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default CustomCard;

Using Your Custom Card

To use your custom card component, pass it to the cardComponent prop of theNextStep component:

import { NextStep, NextStepProvider } from 'nextstepjs';
import CustomCard from './CustomCard';

function MyApp({ Component, pageProps }) {
  return (
    <NextStepProvider>
      <NextStep steps={steps} cardComponent={CustomCard}>
        <Component {...pageProps} />
      </NextStep>
    </NextStepProvider>
  );
}

Custom Card with Shadcn UI

Here's an example of a custom card component using Shadcn UI components:

'use client';

import React from 'react';
import { Step } from 'nextstepjs';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

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

const ShadcnCustomCard = ({
  step,
  currentStep,
  totalSteps,
  nextStep,
  prevStep,
  skipTour,
  arrow,
}: ShadcnCustomCardProps) => {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          {step.icon && <span>{step.icon}</span>}
          {step.title}
        </CardTitle>
      </CardHeader>
      
      <CardContent>
        <div className="mb-2">{step.content}</div>
        {arrow}
      </CardContent>
      
      <CardFooter className="flex justify-between">
        <div className="text-sm text-muted-foreground">
          {currentStep + 1} / {totalSteps}
        </div>
        
        <div className="flex gap-2">
          {currentStep > 0 && (
            <Button variant="outline" size="sm" onClick={prevStep}>
              Previous
            </Button>
          )}
          
          <Button size="sm" onClick={nextStep}>
            {currentStep === totalSteps - 1 ? 'Finish' : 'Next'}
          </Button>
          
          {step.showSkip && (
            <Button variant="ghost" size="sm" onClick={skipTour}>
              Skip
            </Button>
          )}
        </div>
      </CardFooter>
    </Card>
  );
};

export default ShadcnCustomCard;

Customizing the Overlay

NextStepjs allows you to customize the overlay that appears behind the tour steps. You can change the shadow color and opacity using the shadowRgb and shadowOpacity props:

<NextStep
  steps={steps}
  shadowRgb="0, 0, 0"     // Default is "0, 0, 0" (black)
  shadowOpacity="0.2"     // Default is "0.2" (20% opacity)
>
  {children}
</NextStep>

You can use any RGB color value for shadowRgb.
For example:

• shadowRgb="0, 0, 0" - Black overlay
• shadowRgb="0, 0, 255" - Blue overlay
• shadowRgb="255, 0, 0" - Red overlay
• shadowRgb="76, 29, 149" - Purple overlay

Pointer Customization

You can customize the appearance of the pointer (the highlighted area around the target element) using the pointerPadding and pointerRadius properties in each step:

{
  tour: 'welcome',
  steps: [
    {
      icon: <>👋</>,
      title: 'Welcome',
      content: <>This is the first step</>,
      selector: '#welcome-element',
      side: 'top',
      pointerPadding: 16,    // Padding around the target element (in pixels)
      pointerRadius: 8,      // Border radius of the pointer (in pixels)
    },
    // More steps...
  ],
}

Click-Through Overlay

By default, the overlay blocks interactions with the underlying page. You can allow users to interact with the page during a tour by setting the clickThroughOverlayprop to true:

<NextStep
  steps={steps}
  clickThroughOverlay={true}
>
  {children}
</NextStep>

This is useful for tours where you want users to interact with the page while following the tour instructions.