Shadcn Tour for React Radix UI

TourContent
TourActionTrigger
TourClose
TourProgressText
TourTitle
TourDescription
TourPositioner
TourArrow
└── TourArrowTip
TourOverlay
TourSpotlight

import React from "react";
import { Button } from "@/components/ui/button";
import {
  Tour,
  TourContent,
  TourDescription,
  TourFooter,
  TourHeader,
  TourNextStep,
  TourPreviousStep,
  TourProgressText,
  type TourStepType,
  TourTitle,
  TourTrigger,
} from "@/components/ui/tour";

const TourDemo = () => {
  const installRef = React.useRef<HTMLButtonElement>(null);
  const usageRef = React.useRef<HTMLDivElement>(null);

  const steps = React.useMemo<TourStepType[]>(
    () => [
      {
        actions: [{ action: "next", label: "Start tour" }],
        description:
          "This walkthrough stays inside the preview. Next steps highlight pieces of this mini app.",
        id: "welcome",
        title: "Welcome",
        type: "dialog",
      },
      {
        actions: [
          { action: "prev", label: "Back" },
          { action: "next", label: "Next" },
        ],
        description: "Use the CLI or a manual install from this control.",
        id: "install",
        placement: "bottom",
        target: () => installRef.current,
        title: "Install",
        type: "tooltip",
      },
      {
        actions: [
          { action: "prev", label: "Back" },
          { action: "next", label: "Next" },
        ],
        description:
          "Usage notes live next to install so you can copy a snippet.",
        id: "usage",
        placement: "top",
        target: () => usageRef.current,
        title: "Usage",
        type: "tooltip",
      },
      {
        actions: [{ action: "dismiss", label: "Done" }],
        description:
          "The overlay, spotlight, and popover are clipped to this frame.",
        id: "done",
        title: "That’s it",
        type: "dialog",
      },
    ],
    []
  );

  return (
    <Tour steps={steps}>
      <div className="flex w-full max-w-lg flex-col overflow-hidden rounded-xl border bg-background shadow-sm">
        <header className="flex items-center justify-between gap-3 border-b px-3 py-2.5">
          <span className="font-semibold text-sm">Acme UI</span>
          <div className="flex items-center gap-1">
            <Button ref={installRef} size="sm" type="button" variant="ghost">
              Install
            </Button>
            <TourTrigger asChild>
              <Button size="sm">Start tour</Button>
            </TourTrigger>
          </div>
        </header>

        <div className="grid gap-3 p-4 sm:grid-cols-2">
          <div className="rounded-lg border bg-muted/40 p-3">
            <p className="font-medium text-sm">Install</p>
            <p className="mt-1 text-muted-foreground text-xs">
              Add the component with the CLI, then import it.
            </p>
          </div>
          <div className="rounded-lg border bg-muted/40 p-3" ref={usageRef}>
            <p className="font-medium text-sm">Usage</p>
            <p className="mt-1 text-muted-foreground text-xs">
              Compose steps, then call start() from a trigger.
            </p>
          </div>
        </div>
      </div>

      <TourContent>
        <TourHeader>
          <TourProgressText />
          <TourTitle />
          <TourDescription />
        </TourHeader>
        <TourFooter>
          <TourPreviousStep />
          <TourNextStep />
        </TourFooter>
      </TourContent>
    </Tour>
  );
};