# Coach Marks

Feature tour where one spotlight glides from feature to feature, reshaping as it goes, with a tip card alongside. Tap inside the light to try the real control; off-screen features scroll into view.

> Composed · Pro · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/coach-marks
```

## Import

```tsx
import { CoachMarks } from "@/components/ui/coach-marks/coach-marks";
```

## Variants

- `dots` — Step dots: `npx @lumioui/cli add pro/coach-marks-dots`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | — |
| `steps` | `CoachMarkStep[]` | — |
| `step?` | `number` | Controlled step index. Omit (with defaultStep) for uncontrolled. |
| `defaultStep?` | `number` | Uncontrolled initial step. Default 0. |
| `onStepChange?` | `(step: number) => void` | — |
| `onFinish?` | `() => void` | Called when the flow completes (Done on the last step), after the switch-on hold. |
| `onSkip?` | `() => void` | Called when the user skips. Defaults to onFinish. |
| `scrollRef?` | `React.RefObject<ScrollView | null>` | The ScrollView holding the targets. Off-screen targets are scrolled into  view once per step and the spotlight follows them there. |
| `advanceOnBackdropPress?` | `boolean` | Tap the dimmed area to advance. Default true. |
| `showDots?` | `boolean` | Progress dots beside the counter. Default true. |
| `glass?` | `boolean` | Frost the tip card (glass material over the dimmed world). |
| `nextLabel?` | `string` | — |
| `doneLabel?` | `string` | — |
| `backLabel?` | `string` | — |
| `skipLabel?` | `string` | — |
| `className?` | `string` | — |

## Icons rendered

- `pointer` — /icons.html?i=pointer

Source: https://lumioui.com/components/coach-marks