GuidedTour

Step-by-step onboarding tour with spotlight highlighting.

Props

GuidedTourProps

Prop	Type	Required	Description
steps	TourStep[]	Yes	Tour steps
isOpen	boolean	Yes	Whether tour is active
onClose	() => void	Yes	Close callback
onFinish	() => void	Yes	Completion callback
className	string	No	Container class

TourStep

Property	Type	Required	Description
target	string	Yes	CSS selector for target element
title	string	Yes	Step title
content	ReactNode	Yes	Step description
position	'top' | 'right' | 'bottom' | 'left'	No	Tooltip position

Keyboard Navigation

Key	Action
Escape	Close tour
Enter / →	Next step
←	Previous step

Example

const steps: TourStep[] = [
  {
    target: '#sidebar',
    title: 'Navigation',
    content: 'Use the sidebar to navigate.',
    position: 'right',
  },
  {
    target: '#create-btn',
    title: 'Create',
    content: 'Click here to create new items.',
    position: 'bottom',
  },
]

<GuidedTour
  steps={steps}
  isOpen={showTour}
  onClose={() => setShowTour(false)}
  onFinish={handleTourComplete}
/>

See also

• GuidedTour (Conceptual)