React Guided Product Tour
A screenshot with five features is a screenshot a first-time visitor reads none of. The spotlight dims everything but the one rectangle you are talking about, so attention has nowhere to wander, and walks through the features in the order that tells a story.
Live yield headline
The number leadership checks first. Updates every wafer, not every shift.
Next / Back to move, or click a dot to jump. Ending the tour reveals the “Take the tour” prompt again.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| steps | TourStep[] | { id, target: {x,y,w,h}, title, body } — target in % |
| children | React.ReactNode | The screenshot / UI the tour points at |
| defaultOpen | boolean | Start with the spotlight open |
| startLabel | string | Text on the start prompt |
| onComplete | () => void | Fires when the last step is finished |
Percentages, not pixels
Every target is expressed as a percentage of the frame — { x, y, w, h } — so the tour is authored once and stays aligned whether the screenshot renders at 1440px or 360px, with no getBoundingClientRect, no ResizeObserver, and nothing to recompute on layout. The spotlight itself is one trick: a transparent rounded rectangle with a box-shadow spread of 9999px in a translucent dark, which dims the entire frame except the rectangle, in one element.
The tooltip flips above or below the target depending on which half it sits in, so it never runs off the top or bottom, and it is horizontally clamped to stay inside the frame. Back/Next move through the steps, the dots let you jump, and closing the tour returns the start prompt — a visitor who bailed can restart without reloading.
Author steps in narrative order: headline first, then the evidence, then the action. The tour is a story about the product, not an inventory of its widgets.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.