Contextual Product Tours &Onboarding for any stack

Spotlight tours and onboarding checklists for React, Vue, Svelte, Angular, and plain Vanilla JS — same core, themes, keyboard traps, and multi-page persist. Components, v-model:is-open, bind:isOpen, <guideloop-tour>, an imperative API, or <guide-loop>.

$ npm i @guideloop/react

<gzip friendly~ MIT^ React · Vue · Svelte · Angular@ Popper.js v2

GETTING STARTED

Same tour model · every stack

One Step shape, every framework. Pick a stack on the rail — install, API surface, and a minimal example stay in view.

UI Kit Docs

React

npm@guideloop/react

Declarative components and hooks for React 16.8–19. Controlled isOpen, portals, and focus trap out of the box.

API: isOpen · onClose · theme · persist
Peers: react ≥16.8

components
hooks
RSC types

npm i @guideloop/react

App.tsx

import { useState } from "react";
import { GuideLoop, type Step } from "@guideloop/react";

const steps: Step[] = [{
  target: "#search-bar",
  title: "Search",
  content: "Bind any CSS selector."
}];

export function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Start</button>
      <GuideLoop
        steps={steps}
        isOpen={open}
        onClose={() => setOpen(false)}
        theme="tailwind"
      />
    </>
  );
}