React Product Tour Highlight

A lightweight, developer-first React library for building spotlight-based product tours, React onboarding flows, and React walkthroughs with tooltips, step navigation, and basic accessibility.

-- Beautiful React product tours with smooth spotlight highlighting. -- Lightweight. No bloat. Works in minutes.

📦 Install: npm install react-product-tour-highlight

Demo

Key Features

• Spotlight highlight around a target element
• Contextual tooltip with title + description
• Next / Back / Skip (Close) navigation
• Optional auto-scroll to bring the target into view
• Designed for React 18+ + TypeScript
• Accessible defaults (ESC to close, focus management)

Installation

npm i react-product-tour-highlight

Quick Start

import React, { useState } from "react";
import { ProductTour, type Step } from "react-product-tour-highlight";

export function Example() {
	const [isOpen, setIsOpen] = useState(true);

	const steps: Step[] = [
		{
			target: "#pricing",
			title: "See pricing",
			description: "This step highlights the pricing section.",
			placement: "bottom",
			offset: 10,
		},
		{
			target: "#start",
			title: "Get started",
			description: "Next, we guide you to the primary CTA.",
			placement: "top",
			offset: 10,
		},
	];

	return (
		<>
			<ProductTour
				steps={steps}
				isOpen={isOpen}
				initialStep={0}
				onClose={() => setIsOpen(false)}
			/>

			<div id="pricing" style={{ marginTop: 120 }}>
				Pricing
			</div>
			<button id="start">Start</button>
		</>
	);
}

Steps (React onboarding / walkthrough)

Each step points to a DOM node using either:

• A CSS selector string (e.g. "#pricing"), or
• A direct HTMLElement reference

export type Step = {
	target: string | HTMLElement;
	title: string;
	description?: string;
	placement?: "top" | "bottom" | "left" | "right";
	offset?: number;
};

Props (TypeScript)

• steps: Step[] (required)
• isOpen: boolean (optional). When provided, the tour is controlled by the parent.
• initialStep: number (optional, default 0)
• onClose: () => void (optional). Called when the user closes/skips the tour.
• onStepChange: (nextStepIndex: number) => void (optional)

Accessibility

• Uses a dialog role when open
• ESC closes the tour
• Keyboard support for advancing (Enter) and navigation buttons
• Basic focus management within the tooltip

Notes

• If a step target cannot be found, the library will warn in the console and skip positioning for that step.
• For best results, ensure the target elements exist in the DOM when the tour opens.

License

MIT