v0.1.0 · MIT licensed
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.
Install
Works with any bundler. Ships ESM and CJS.
npm
npm install guide.js pnpm
pnpm add guide.js yarn
yarn add guide.js bun
bun add guide.js The whole API, on one screen
No providers. No stores. Just steps and a component.
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
/>
);
}
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.
Ready to build your first tour?
The quick start gets you rendering steps in under two minutes.