Tour

Interactive product onboarding guide walkthroughs and visual highlights for specific UI controls.

Preview & Interactive Laboratory

Interactive Walkthrough Guide

Launch a live walkthrough tour targeting UI controls on this page. Click below to initiate.

Contextual Tooltip Highlight

Basic Highlight

Implemented using the Popover component to anchor helpful tooltips to elements.

Usage & Implementation

import { Tour } from "@/components/ui/tour"

const steps = [
  { target: "#step-1", content: "Check this out!" }
];

<Tour steps={steps} run={run} onFinish={() => setRun(false)} />

React / Tailwind

Granular Customization

Steps Array

Configures targeting elements (IDs, classes) and instructional messages.

className={`steps={steps}`}

Run Option

Simple boolean anchor to launch guide walkthroughs dynamically.

className={`run={run}`}

API Reference (Props)

Prop	Type	Default	Description
steps	Step[]	undefined	Array of joyride steps detailing target query selectors and descriptions.
run	boolean	false	When true, launches and executes the guide overlay.
onFinish	function	undefined	Callback triggered when the tour completes or is skipped.