Skip to content
guide.js

Step Types

Guide.js supports four step types. You pick one via the configuration.type field on each step.

Dialog

Section titled “Dialog”

A centered card. Use for welcome screens and recaps that don’t need to be anchored.

configuration: {
  type: "dialog",
  progressButtonText: "Next",
  progressButtonPosition: "right",
  contentJustify: "justify-between",
  showStepCount: true,
  customPivotSelector: "",
  isClosable: true,
}

Pointer

Section titled “Pointer”

Anchored to an element via a CSS selector. Points at the element with an arrow and positions itself using the best-fit edge.

configuration: {
  type: "pointer",
  progressButtonText: "Next",
  progressButtonPosition: "right",
  contentJustify: "justify-between",
  showStepCount: true,
  customPivotSelector: "#sidebar-button",
  isClosable: true,
}
Section titled “Banner”

A full-width bar pinned to the top or bottom of the viewport. Good for announcements or system-wide messages.

configuration: {
  type: "banner",
  progressButtonText: "Got it",
  progressButtonPosition: "right",
  contentJustify: "justify-between",
  showStepCount: false,
  customPivotSelector: "",
  isClosable: true,
}

Announcement

Section titled “Announcement”

A floating card anchored to a corner of the viewport. Use for product updates or non-blocking notifications.

configuration: {
  type: "announcement",
  progressButtonText: "Dismiss",
  progressButtonPosition: "right",
  contentJustify: "justify-between",
  showStepCount: false,
  customPivotSelector: "",
  isClosable: true,
  position: "bottom-right",
}

Picking the right type

Section titled “Picking the right type”
  • Dialog — welcome / recap screens.
  • Pointer — draw attention to a specific element.
  • Banner — system-wide announcements.
  • Announcement — non-blocking updates in the corner.