> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jtbdos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tour

> Self-guided walkthrough component to guide users through UI elements

# Tour Component

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

## Usage

```tsx
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.                                     |

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