Tour Component

The Tour component highlights elements marked with matching data-tour-id attributes and displays a guided overlay with navigation controls.

Usage

import React from 'react';
import { Tour, type TourStep } from '@repo/design-system/components/ui/tour';

const steps: TourStep[] = [
  { id: 'step-1', title: 'Welcome', description: 'This is the welcome step.' },
  { id: 'step-2', title: 'Next Step', description: 'This highlights the next element.' },
];

export default function App() {
  return (
    <Tour steps={steps}>
      <div data-tour-id="step-1">First Element</div>
      <div data-tour-id="step-2">Second Element</div>
    </Tour>
  );
}

Props

Name	Type	Description
steps	`TourStep[]`	Steps array with identifiers, titles, and descriptions
children	`ReactNode`	Container elements that may include highlighted elements

TourStep Type

The TourStep type defines the shape of each step passed to the steps prop.

Field	Type	Description
`id`	`string`	A unique identifier that must match the `data-tour-id` attribute on the element you want to highlight.
`title`	`string`	The heading displayed in the tooltip bubble for this step.
`description`	`string`	A short explanatory text shown under the title inside the tooltip.

interface TourStep {
  id: string;
  title: string;
  description: string;
}