An onboarding spotlight overlay that dims the page around a target element and walks users through a sequence of steps with a positioned coach-mark card.
"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>
);
}
Part of Hirael — browse the full library on 21st.dev.