Coach Marks

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/coach-marks

Usage

import { CoachMarks } from "@/components/ui/coach-marks/coach-marks";
<CoachMarks />

Examples

Step dots

A transit app's first-run tour in three steps with progress dots.

API reference

Prop Type Default
open* boolean —
steps* CoachMarkStep[] —
step number

Controlled step index. Omit (with defaultStep) for uncontrolled.

 —
defaultStep number

Uncontrolled initial step. Default 0.

 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.

 true
showDots boolean

Progress dots beside the counter. Default true.

 true
glass boolean

Frost the tip card (glass material over the dimmed world).

 false
nextLabel string "Next"
doneLabel string "Done"
backLabel string "Back"
skipLabel string "Skip"
className string —