# Product tour

> A guided tour: a spotlight glides between elements with an explaining card.

Component · Pro · https://lodeui.com/components/product-tour

## When to use

- First-run onboarding and new-feature walkthroughs.

## When not to use

- Explaining everything: keep tours to 3–5 steps.

## Installation

```bash
npx shadcn@latest add @lode/product-tour
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProductTour } from "@/components/ui/product-tour";

<ProductTour open={open} onOpenChange={setOpen} steps={[
  { target: "#search", title: "Find anything", body: "Search projects and people." },
  { target: "#new", title: "Create", body: "Start a project in one click." },
]} />
```

## API reference

### ProductTour

A dimmed overlay with a spotlight on each target and a step card.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `{ target; title; body; side? }[]` | – | target is a CSS selector. |
| open / onOpenChange | `boolean` | – | Controlled visibility. |
| onFinish | `() => void` | – | After the last step. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Previous or next step |
| Esc | Skip the tour |
| Tab | Reach Back, Next and Skip |

## Accessibility

- The card is a labelled modal dialog that takes focus and returns it when done.
- Step count is part of the content.

## Motion

- The spotlight and card glide to each new target; content swaps with a short slide; target scrolls into view (instantly under reduced motion).

## Responsive behavior

- The card stays inside the viewport.

## Performance

- Measures only on step change, resize and scroll.

## Notes for AI

- Store completion so the tour doesn't reappear.

## Related

- [Onboarding checklist](https://lodeui.com/blocks/onboarding-checklist) — A setup checklist with progress ring and inline actions.
- [Onboarding wizard](https://lodeui.com/blocks/onboarding-wizard) — Welcome flow for role, goals, team size and invites, ending with confetti.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.