@guide-js/react

Lightweight React component for product tours, onboarding, and contextual help.

• Homepage · guidejs.com
• Docs · guidejs.com/docs/introduction
• Source · github.com/guide-js/guide
• License · MIT

Install

npm install @guide-js/react

Usage

import { Guide } from "@guide-js/react";
import "@guide-js/react/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 />;
}

Read the quick start for a full walkthrough.

Peer dependencies

• react >= 18
• react-dom >= 18

License

MIT