Tour

Component 1

About

Onboarding spotlight that dims the page around a target element and walks users through steps with a positioned coach-mark card.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tour to your project and fits it to your theme.

Code

How Tour is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { Tour, TourTrigger, type TourStep } from "@/components/ui/tour";

export default function TourDemo() {
  const titleRef = React.useRef<HTMLHeadingElement>(null);
  const actionRef = React.useRef<HTMLButtonElement>(null);

  const steps: TourStep[] = [
    {
      target: titleRef,
      title: "Welcome",
      description: "This is the page title. Let's start the tour from here.",
      side: "bottom",
    },
    {
      target: actionRef,
      title: "Take action",
      description: "Click this button to perform the primary action.",
      side: "top",
    },
  ];

  return (
    <Tour steps={steps}>
      <div className="flex h-screen w-full flex-col items-center justify-center gap-6 bg-background text-foreground">
        <h1 ref={titleRef} className="text-2xl font-semibold">
          Dashboard overview
        </h1>
        <button
          ref={actionRef}
          className="rounded-md border border-border bg-background px-4 py-2 text-sm font-medium shadow-sm"
        >
          Create project
        </button>
        <TourTrigger>Start tour</TourTrigger>
      </div>
    </Tour>
  );
}