React product tour & onboarding library

import "@glowhop/styles-tour/default.css";
import { GlowTourDefault, useGlowTour } from "@glowhop/react-tour";

export function TourApp() {
  const { tour, create, start, cancel, status, currentStepIndex, totalSteps } = useGlowTour();

  function startTour() {
    const workflow = create("product-tour")
      .step({
        id: "features",
        target: '[data-tour="features"]',
        title: "Explore features",
        content: "Learn about all the capabilities.",
      })
      .step({
        id: "pricing",
        target: '[data-tour="pricing"]',
        title: "Check pricing",
        content: "See plans that fit your needs.",
      })
      .build();
    void start(workflow);
  }

  return (
    <>
      <main>
        <section data-tour="features">
          <h2>Features</h2>
          <p>We offer guided tours, SSR support, and full keyboard navigation.</p>
        </section>
        <section data-tour="pricing">
          <h2>Pricing</h2>
          <p>Open source and free.</p>
        </section>
        {status === "active" ? (
          <p>
            Step {currentStepIndex + 1} of {totalSteps} <button onClick={() => void cancel()}>Stop</button>
          </p>
        ) : (
          <button onClick={startTour}>Start tour</button>
        )}
      </main>
      <GlowTourDefault tour={tour} />
    </>
  );
}