Tour

Guided walkthrough component with spotlight highlighting for onboarding and feature discovery.

Basic Usage

Create a guided tour with multiple steps and automatic spotlight highlighting.

Step 1

First tour target element

Step 2

Second tour target element

Step 3

Third tour target element

Step 4

Fourth tour target element

With Icons

Add custom icons to each tour step for better visual communication.

Primary Style

Use primary styling for important onboarding tours.

Features

•SVG spotlight mask highlighting target elements
•Automatic positioning around target elements
•Smart placement (top, bottom, left, right)
•Custom icons for each step
•Step navigation with Next/Previous buttons
•Progress indicator (Step 1 of 4)
•Optional mask overlay for focus
•Default and primary styling options
•Close button and completion handling

API Reference

TourProps

Prop	Type	Default	Description
steps	TourStep[]	[]	Array of tour steps
open	boolean	false	Whether tour is visible
current	number	0	Current step index
onChange	(current: number) => void	-	Callback when step changes
onClose	() => void	-	Callback when tour closes
mask	boolean	true	Show spotlight mask
type	'default' \| 'primary'	'default'	Tour style variant

TourStep

Property	Type	Description
target	string \| RefObject<HTMLElement>	CSS selector or ref to target element
title	string	Step title
description	string	Step description
placement	'top' \| 'bottom' \| 'left' \| 'right'	Popover placement relative to target
icon	ComponentType<{ className?: string }>	Optional icon component for step
cover	string	Optional cover image URL

Usage

import { Tour, type TourStep } from '@/components/ui/tour'
import { useRef, useState } from 'react'
import { Lightbulb } from 'lucide-react'

function MyComponent() {
  const [open, setOpen] = useState(false)
  const [current, setCurrent] = useState(0)
  const step1Ref = useRef<HTMLDivElement>(null)

  const steps: TourStep[] = [
    {
      target: step1Ref,
      title: 'Welcome',
      description: 'This is your first step.',
      placement: 'bottom',
      icon: Lightbulb,
    },
    // ... more steps
  ]

  return (
    <>
      <div ref={step1Ref}>Target Element</div>
      <button onClick={() => setOpen(true)}>Start Tour</button>

      <Tour
        steps={steps}
        open={open}
        current={current}
        onChange={setCurrent}
        onClose={() => setOpen(false)}
      />
    </>
  )
}