Product Tour
A coachmark tour: an SVG spotlight that glides between targets, a step card with progress, next, back and skip, arrow keys, Escape to end and scroll-into-view.
Preview
O
Search/
Shipped
14
In review
6
Blocked
2
Launch checklist
Q4 roadmap
Churn notes
IMMHPS
InviteInstall
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | TourStep[] | — | { target (selector or ref), title, body?, side?, align? }. Required. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / false / — | Tour visibility. |
| step / defaultStep / onStepChange | number / number / (step) => void | — / 0 / — | Current step. |
| onFinish / onSkip | () => void / (step) => void | — | Done on the last step, or ended early with Skip or Escape. |
| container | HTMLElement | null | viewport | Scope the spotlight to an element. null renders nothing until it is set. |
| padding / radius | number / number | 6 / 12 | Spotlight gap around the target and its corner radius, in px. |
| scroll / autoFocus | boolean / boolean | true / true | Scroll targets into view; move focus into the card on open. |
| labels | { next?, back?, skip?, done? } | English | Button text. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.