API

<Guide> props

Prop	Type	Description
steps	StepInterface[]	The list of steps to render. Required.
tour	TourInterface	Tour metadata (id, title, configuration).
isActive	boolean	Whether the tour is currently visible. Defaults to false.
startIndex	number	The step to start on. Defaults to 0.
onNext	(stepId?: string) => void	Fires when the user advances.
onStop	(stepId?: string) => void	Fires when the tour stops (completed or stopped).
onDismiss	(stepId?: string) => void	Fires when the user closes the tour early.
rootElement	HTMLElement	Portal target. Defaults to document.body.
renderFooter	(step?: StepInterface) => React.ReactNode	Slot for injecting a footer below each step (e.g. branding).

<Guide> also accepts the full GuideConfig shape (overlay color, popover class, keyboard control, etc.). See the configuration reference for the complete list.

Types

TourInterface

interface TourInterface {
  id: string;
  title: string;
  description?: string;
  appUrl?: string;
  publishedAt?: string;
  configuration?: Partial<TourConfigurationType>;
}

StepInterface

interface StepInterface {
  id?: string;
  title?: string;
  description?: React.ReactNode;
  pivotSelector?: string | null;
  order?: number;
  url?: string;
  tourId?: string;
  isClosable?: boolean;
  progression?: "elementClick" | "progressButton";
  configuration?: Partial<StepConfigurationType>;
  popover?: PopoverConfig;
  onHighlightStarted?: GuideHook;
  onHighlighted?: GuideHook;
  onDeselected?: GuideHook;
  disableActiveInteraction?: boolean;
  proceedOnHighlightedElementClick?: boolean;
}

StepConfigurationType (selected fields)

type StepConfigurationType = {
  type: "banner" | "pointer" | "dialog" | "announcement";
  progressButtonText: string;
  progressButtonPosition: "left" | "center" | "right";
  contentJustify: "left" | "right" | "justify-between" | "justify-around" | "justify-evenly" | null;
  showStepCount: boolean;
  customPivotSelector: string;
  isClosable: boolean;
  position?: DialogPosition;
  animationDirection?: StepAnimationDirection;
  theme?: {
    /* colors, radius, padding, etc. */
  };
  primaryButton?: ButtonConfig;
  previousButton?: ButtonConfig;
  closeButton?: ButtonConfig;
  beacon?: BeaconConfig;
};

DialogPosition

type DialogPosition =
  | "default"
  | "center"
  | "bottom-right"
  | "bottom-left"
  | "bottom-center"
  | "top"
  | "top-right"
  | "top-left"
  | "top-center";

See the configuration reference for the full shape.