Tour

A guided tour component designed for user onboarding. It highlights elements on the page and shows tooltips to guide users through your application's features step by step.

Installation

pnpm dlx shadcn@latest add https://ui-registry.com/r/tour.json

Usage

import { Tour, TourProvider, type TourStep } from '@/components/ui/tour';

const steps: TourStep[] = [
  {
    target: '#welcome-button',
    title: 'Welcome!',
    description: 'Click here to get started with our app.',
    placement: 'bottom',
  },
  {
    target: '#settings-menu',
    title: 'Settings',
    description: 'Customize your experience here.',
    placement: 'left',
  },
];

const [currentStep, setCurrentStep] = useState(0); const [open, setOpen] = useState(true);

<Tour   steps={steps}   currentStep={currentStep}   onStepChange={setCurrentStep}   onComplete={() => setOpen(false)}   onSkip={() => setOpen(false)}   open={open} />

Examples

Basic Tour

const steps: TourStep[] = [
  {
    target: '#feature-1',
    title: 'Feature One',
    description: 'This is the first feature to explore.',
  },
  {
    target: '#feature-2',
    title: 'Feature Two',
    description: 'Next, check out this amazing feature.',
  },
  {
    target: '#feature-3',
    title: 'Feature Three',
    description: 'Finally, discover this powerful capability.',
  },
];

<Tour   steps={steps}   currentStep={currentStep}   onStepChange={setCurrentStep}   onComplete={handleComplete}   open={showTour} />

With Custom Placement

const steps: TourStep[] = [
  {
    target: '#sidebar',
    title: 'Navigation',
    description: 'Use the sidebar to navigate between pages.',
    placement: 'right',
  },
  {
    target: '#header',
    title: 'Header',
    description: 'Access quick actions from the header.',
    placement: 'bottom',
  },
];

Onboarding Flow

function OnboardingTour() {
  const [open, setOpen] = useState(true);
  const [step, setStep] = useState(0);

  const steps: TourStep[] = [     {       target: '#dashboard',       title: 'Your Dashboard',       description: 'View all your important metrics at a glance.',     },     {       target: '#create-button',       title: 'Create New',       description: 'Start by creating your first project.',     },     {       target: '#help',       title: 'Need Help?',       description: 'Click here anytime for support.',     },   ];

  return (     <Tour       steps={steps}       currentStep={step}       onStepChange={setStep}       onComplete={() => {         setOpen(false);         localStorage.setItem('onboarding_complete', 'true');       }}       onSkip={() => setOpen(false)}       open={open}     />   ); }

API Reference

Tour

Prop	Type	Default
steps	TourStep[]	-
currentStep	number	0
onStepChange	(step: number) => void	-
onComplete	() => void	-
onSkip	() => void	-
open	boolean	false
className	string	-

TourStep

Property	Type	Default
target	string	-
title	string	-
description	string	-
placement	"top" \	"right" \	"bottom" \	"left"	-