Guide.js

Product tours,
one component.

Guide.js is a lightweight, open-source React component for product tours, onboarding, and contextual help. TypeScript-first. Themeable. Zero backend.

Read the docs

The whole API

All on one screen.

No providers. No stores. Steps in, popovers out.

import { Guide } from "guide.js";
import "guide.js/styles.css";

const steps = [
  {
    id: "welcome",
    title: "Welcome aboard",
    description: "Let us show you around.",
    configuration: {
      type: "dialog",
      progressButtonText: "Next",
      progressButtonPosition: "right",
      contentJustify: "justify-between",
      showStepCount: true,
      customPivotSelector: "",
      isClosable: true,
    },
  },
];

export function App() {
  return (
    <Guide
      tour={{ id: "intro", title: "Intro", steps }}
      steps={steps}
      isActive
    />
  );
}

Theme playground

Make it yours, live.

Every visual knob is a JSON token. Drop the output straight into a step's configuration.theme.

Why Guide.js

Built to stay out of your way.

Stateless component

Pass in steps, render <Guide>. No stores, no providers, no hidden side effects.

Four step types

Dialog, pointer, banner, and announcement. Pick what fits the moment.

Anchor to anything

Target any element with a CSS selector. Guide.js handles positioning and repositioning.

Composable

Render-prop slots let you inject footers, branding, and controls without forking the component.

Themeable

Override CSS variables, per-step theme tokens, or drop in custom CSS.

TypeScript-first

Full type definitions for tours, steps, configuration, and lifecycle callbacks.

Install

One command.

Works with any bundler. Ships ESM and CJS. No peer-dep gymnastics.

npm install guide.js

Ready to ship your first tour?

The quick start has you rendering steps in under two minutes.

Quick start Star on GitHub