Product tour

A React component in Beamline's Overlays category.

A short guided tour over the real interface: a spotlight that glides from one element to the next while the rest of the screen dims, and a card beside each element that says what it does, with its step and progress, Back, Next and Skip; focus moves into the card and comes back where it was, Escape ends the tour, arrows step through it, and a quieter beacon variant marks one new thing without dimming anything.

Use it for

A first visit or a redesign: three to six steps that point at the parts people need first.
Announcing one new control where it lives (beacon), instead of in a modal.

Not for

Anything people must read to use the product (put it on the page or in empty states).
Long instructions (a help article; link to it from the last step).
A one-line hint on a control (tooltip).

Anatomy

scrim with a cut-out around the current element (spotlight), its corners following the element's own
card: step count and progress dots, title, body, optional media, Back, Next / Done, Skip tour
beacon variant: a ring at the element and a card that opens from it, no scrim
live region announcing each step

Variants

0: variant: spotlight · beacon
1: placement per step: top · bottom · left · right · auto (default: the side with room)
2: step without a target: the card centred, for a welcome or a closing step
3: interactive: the element in the spotlight stays usable

States

closed
open on a step
moving between steps (spotlight and card travel)
target missing (the step centres its card and says nothing is pointed at)
last step (Next becomes Done)
Escape also dismisses the tour while focus is in the current interactive target.

Keyboard

Opening moves focus to the card; Tab stays among its buttons
→ or Enter on Next goes on, ← goes back, Escape ends the tour
Focus returns to where it was when the tour ends

Motion

The spotlight's hole travels to the next element with its four edges on the standard ease, and the card slides beside it and changes height in place. The page scrolls the next element into view first (instantly under reduced motion). The beacon ring breathes twice when it appears and then rests. Opening fades the scrim in; ending fades it out. Nothing runs at rest.

Props

Prop	Type	Default	Description
`steps` (required)	`TourStep[]`	—	{ target?: string \| RefObject<HTMLElement>, title, body?, media?, placement?, interactive? }; target is a CSS selector or a ref.
`open / defaultOpen / onOpenChange`	`boolean`	—	Whether the tour shows.
`step / defaultStep / onStepChange`	`number`	—	The current step, from 0.
`onFinish`	`() => void`	—	Done on the last step.
`onSkip`	`(step: number) => void`	—	Skip tour or Escape, with the step it ended on.
`variant`	`"spotlight" \| "beacon"`	—	Default spotlight.
`padding`	`number`	—	Room around the element inside the spotlight. Default 6.
`labels`	`{ next?, back?, done?, skip? }`	—	Button words.
`className / classNames / style`	`string / ProductTourClassNames / CSSProperties`	—	The card and its parts (scrim, hole, card, title, body, progress, actions, beacon).

Dependencies

lucide-react

Import

import { ProductTour } from "@/components/product-tour/product-tour";

Get it

Product tour is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent