# Onboarding tour (goodtabs UI)

A step by step spotlight tour with keyboard control and Escape to end.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/onboarding-tour.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/onboarding-tour`

## Usage

```tsx
import { OnboardingTour } from "@/components/ui/onboarding-tour"

<div className="relative">
  <button data-tour="search">Search</button>
  {open && <OnboardingTour steps={steps} onClose={() => setOpen(false)} />}
</div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `TourStep[]` |  | Each step has a target, a title and a body. target matches a data-tour attribute. |
| onClose | `() => void` |  | Called on Done, Skip or Escape. Unmount the tour here. |
| className | `string` |  | Applies to the overlay. |

## When to use

- Showing a new person three to five controls once, on first visit
- Introducing a feature after a release

## When not to use

- Long product explanations: write docs instead
- Every visit: remember that it was seen and do not repeat it

## Notes for agents

- The overlay fills its nearest positioned parent, so put it inside a relative element
- Targets are found with querySelector on data-tour inside that parent
- Mounting takes no focus, so a tour that starts open leaves focus and scroll alone
- Focus moves to the step card on each step, and on open only when focus is already inside the parent, so keep the start button in there
- Tab cycles inside the card; Escape, Skip and Done all call onClose
- Arrow keys move between steps
- No animation, so reduced motion needs no special case

Docs: https://ui.goodtabs.co/components/onboarding-tour