# Tour

A guided tour whose spotlight travels between real elements, follows them through scrolling and reflow, and explains each one beside it.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/tour
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Tour.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { Tour } from "mizu-ui";

export function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        type="button"
        id="tour-start"
        className="mizu-text-button"
        onClick={() => setOpen(true)}
      >
        Take the tour
      </button>
      <Tour
        open={open}
        onOpenChange={setOpen}
        steps={[
          {
            target: "#tour-start",
            title: "This started the tour",
            body: "Each step points at a real element on the page.",
          },
        ]}
      />
    </>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/tour
```

## Props

- `steps`: `TourStep[]`. target (selector or function), title, body, placement and padding.
- `open / onOpenChange`: `boolean / function`. Controlled visibility; Escape and Skip request closing.
- `step / defaultStep / onStepChange`: `number`. The current step.
- `onFinish`: `() => void`. Called when the last step is completed, not when skipped.
- `label`: `string` (default `"Product tour"`). Accessible name of the tour.

## Keyboard

- → · Enter: Next step
- ←: Previous step
- Esc: Leave the tour

## Accessibility

A native modal dialog: the page becomes inert, focus stays on the tour's primary action and returns afterwards, Escape leaves. Each step is announced with its position; arrow keys move between steps. When a step's element is missing, the card centres itself and says so.

## Motion

The spotlight pursues each new element — even while it scrolls into view — framed by accent corner brackets, while the card travels to the side with room and its copy fades in. Progress diamonds grow at the current step. Reduced motion moves the spotlight directly.