​
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

NameTypeDescription
stepsTourStep[]Steps array with identifiers, titles, and descriptions
childrenReactNodeContainer elements that may include highlighted elements

​
TourStep Type

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

FieldTypeDescription
idstringA unique identifier that must match the data-tour-id attribute on the element you want to highlight.
titlestringThe heading displayed in the tooltip bubble for this step.
descriptionstringA short explanatory text shown under the title inside the tooltip.
interface TourStep {
  id: string;
  title: string;
  description: string;
}