Quick Start

1. Import the component:

import TourGuide from '@/components/TourGuide';
import { useState } from 'react';

2. Define your tour steps:

const steps = [
  {
    selector: '#element1',
    text: 'This is the first step description'
  },
  {
    selector: '#element2',
    text: 'This is the second step'
  },
];

3. Use in your component:

const [showTour, setShowTour] = useState(false);

{showTour && (
  <TourGuide
    steps={steps}
    onComplete={() => setShowTour(false)}
  />
)}

Interactive Demos

Click on any button below to start a tour guide demonstration. Each demo showcases different features and styles.

Default Tour (Separate Navigation)

Navigation controls appear in a separate panel at the bottom-right corner.

Embedded Navigation Tour

Navigation buttons are embedded inside the tooltip at the bottom.

Custom Color Schemes

Try different color themes: indigo, sky, rose, emerald, or yellow.

Features

Smart Positioning

Automatically positions tooltips to avoid screen edges and ensure visibility.

Dark Mode Support

Full dark mode support with beautiful color schemes.

Flexible Navigation

Choose between embedded or separate navigation styles.

API Persistence

Save tour completion status via API or localStorage.

Customizable Colors

Choose from 5 pre-built color schemes or customize your own.

Smooth Animations

Beautiful transitions and scroll-into-view animations.

Props

PropTypeDefaultDescription
stepsArray-Array of tour steps with selector and text
navigationStyle"embedded" | "separate"separateWhere navigation buttons appear
navigationPositionNavigationPositionbottomRightPosition of navigation panel
colorTourGuideColorindigoColor scheme (sky, rose, indigo, yellow, emerald)
onCompleteFunction-Callback when tour is completed
nextLabelstringNext / →Custom label for next button
previousLabelstringPrevious / ←Custom label for previous button
disablePersistencebooleanfalseDisable localStorage persistence (useful for demos/previews)