Examples

Real-world examples showing how to use NFSFU234TourGuide in different scenarios.

Browse Examples

Simple tour with essential features

🚀Basic Tour

Brand-specific colors and styling

🎨Custom Theme

Device-specific steps and content

📱Mobile-Aware

Production-ready onboarding flow

⚡SaaS Onboarding

Internationalization support

🌍Multi-Language (i18n)

Dynamic steps based on user state

🔀Conditional Steps

Quick Snippets

Minimal Setup


import { Tour } from '@nfsfu234/tour-guide';
 
const steps = [
  { target: '#hero', content: 'Welcome!' },
  { target: '#cta', content: 'Click here to start.' },
];
 
<Tour steps={steps} />

With Welcome Screen


<Tour
  steps={steps}
  welcomeScreen={{
    enabled: true,
    title: 'Welcome!',
    message: 'Let me show you around.',
  }}
/>

Custom Colors


<Tour
  steps={steps}
  theme="custom"
  customTheme={{
    tooltipBg: '#1e293b',
    tooltipText: '#f1f5f9',
  }}
  accentColor="#6366f1"
/>

Need Help?

Can’t find what you’re looking for?

API Reference - Complete prop documentation
GitHub Discussions - Ask questions
Report Issues - Found a bug?