Product Tour

Step-by-step tooltips pointing to UI elements for onboarding users. Features CSS selector targeting, multiple positions, and dismissible navigation.

Preview

Features

Floating tooltips with CSS selector targeting
4 position options: top, bottom, left, right
Step counter (Step 1 of 4)
Back/Next navigation buttons
X button to dismiss tour at any step
Escape key to dismiss
Arrow pointing to target element
Auto-repositioning on scroll/resize
onComplete callback when tour finishes
Controlled open/close state

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
product-tour.tsx	components/onboarding/product-tour/product-tour.tsx
product-tour-context.tsx	components/onboarding/product-tour/product-tour-context.tsx
tour-tooltip.tsx	components/onboarding/product-tour/tour-tooltip.tsx
types.ts	components/onboarding/product-tour/types.ts
index.ts	components/onboarding/product-tour/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add popover

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. product-tour.tsx

product-tour.tsx

tsx

"use client";

import { useEffect } from "react";
import { ProductTourProvider } from "./product-tour-context";
import { TourTooltip } from "./tour-tooltip";

2. product-tour-context.tsx

product-tour-context.tsx

tsx

"use client";

import {
  createContext,
  useContext,

3. tour-tooltip.tsx

tour-tooltip.tsx

tsx

"use client";

import { useEffect, useState, useRef } from "react";
import { createPortal } from "react-dom";
import { X, ArrowLeft, ArrowRight } from "@phosphor-icons/react";

4. types.ts

types.ts

tsx

export type TourPosition = "top" | "bottom" | "left" | "right";

export interface TourStep {
  id: string;
  target: string;

5. index.ts

index.ts

tsx

export { ProductTour } from "./product-tour";
export { ProductTourProvider, useProductTour } from "./product-tour-context";
export type {
  TourStep,
  TourPosition,
  ProductTourProps,
  ProductTourContextValue,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/dashboard.tsx

tsx

import { useState } from "react";
import { ProductTour, type TourStep } from "@/components/onboarding/product-tour";

const tourSteps: TourStep[] = [
  {

ProductTour Props

Prop	Type	Default
steps	TourStep[]	required
open	boolean	required
onOpenChange	(open: boolean) => void	required
onComplete	() => void	-