Skip to content
guide.js

Quick Start

This guide walks you through creating a simple two-step tour.

1. Define your steps

Section titled “1. Define your steps”

Each step describes what to show and where to anchor it:

import type { StepInterface, TourInterface } from "guide.js";


const steps: StepInterface[] = [
  {
    id: "step-1",
    title: "Welcome aboard",
    description: "Let us show you around in under a minute.",
    configuration: {
      type: "dialog",
      progressButtonText: "Next",
      progressButtonPosition: "right",
      contentJustify: "justify-between",
      showStepCount: true,
      customPivotSelector: "",
      isClosable: true,
    },
  },
  {
    id: "step-2",
    title: "Your dashboard",
    description: "This is where your data lives.",
    configuration: {
      type: "pointer",
      progressButtonText: "Got it",
      progressButtonPosition: "right",
      contentJustify: "justify-between",
      showStepCount: true,
      customPivotSelector: "#dashboard",
      isClosable: true,
    },
  },
];


const tour: TourInterface = {
  id: "welcome-tour",
  title: "Welcome",
  steps,
};

2. Render the Guide

Section titled “2. Render the Guide”

Drop the component into your app and pass in your steps:

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


export function App() {
  const [isActive, setIsActive] = useState(false);


  return (
    <>
      <button onClick={() => setIsActive(true)}>Start tour</button>


      <Guide
        tour={tour}
        steps={steps}
        isActive={isActive}
        onStop={() => setIsActive(false)}
        onDismiss={() => setIsActive(false)}
      />
    </>
  );
}

3. That’s it

Section titled “3. That’s it”

The tour starts when isActive flips to true. Users can step through, skip, or dismiss it. Persist progress wherever you want — localStorage, your API, or state in a parent component.

Next steps

Section titled “Next steps”