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
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | Array | - | Array of tour steps with selector and text |
| navigationStyle | "embedded" | "separate" | separate | Where navigation buttons appear |
| navigationPosition | NavigationPosition | bottomRight | Position of navigation panel |
| color | TourGuideColor | indigo | Color scheme (sky, rose, indigo, yellow, emerald) |
| onComplete | Function | - | Callback when tour is completed |
| nextLabel | string | Next / → | Custom label for next button |
| previousLabel | string | Previous / ← | Custom label for previous button |
| disablePersistence | boolean | false | Disable localStorage persistence (useful for demos/previews) |