Props
Joyride's props are split into two groups: Tour Props control how the tour runs (start/stop, events, controlled mode), and Shared Props configure the visual and interactive elements (components, positioning, locale, styles).
Beyond props, you can customize theming and behavior through Options, Styles, and Floating Options — all settable globally or per-step.
The only required prop is steps. Pass an array of Step objects and you're ready to go.
Tour Props
Control the tour lifecycle: start and stop it, listen to events, switch between controlled and uncontrolled mode, and set global defaults.
| Prop | Type | Default |
|---|---|---|
continuous Play the tour sequentially with the Next button. | boolean | false |
debug Log Joyride's actions to the console. | boolean | false |
initialStepIndex The starting step index for uncontrolled tours. Ignored when | number | 0 |
nonce A nonce value for inline styles (Content Security Policy). | string | -- |
onEvent A function called when Joyride fires an event. Receives See Events for details. | EventHandler | -- |
options Default options for all steps. Can be overridden per-step by setting option fields directly on the step object. | Partial<Options> | -- |
portalElement The element to render components into. Accepts a CSS selector or HTMLElement. | string | HTMLElement | document.body |
run Run/stop the tour. Equivalent to calling | boolean | false |
scrollToFirstStep Scroll the page for the first step. | boolean | false |
stepIndex Setting a number here will turn Joyride into You'll have to keep an internal state and update it with the events in | number | -- |
steps — required The tour's steps. Check the step docs for more information. | Array<Step> | -- |
Shared Props
Customize components, positioning, locale, and styles at the tour level.
Every shared prop is inherited by all steps and can be overridden individually on any Step object.
| Prop | Type |
|---|---|
arrowComponent Custom arrow component. | ElementType<ArrowRenderProps> |
beaconComponent Custom beacon component. | ElementType<BeaconRenderProps> |
Tooltip/beacon positioning config via Floating UI. | Partial<FloatingOptions> |
loaderComponent Custom loader component. Set to | ElementType<LoaderRenderProps> | null |
Tooltip strings (button labels, aria-labels). | Locale |
styles Style overrides for tooltip and other elements. | PartialDeep<Styles> |
tooltipComponent Custom tooltip component. | ElementType<TooltipRenderProps> |
locale
The strings used in the tooltip.
| Key | Type | Default |
|---|---|---|
back Back button label | ReactNode | Back |
close Close button label | ReactNode | Close |
last Primary button label on the last step | ReactNode | Last |
next Next button label | ReactNode | Next |
nextWithProgress Next button label when Use | ReactNode | Next ({current} of {total}) |
open Beacon aria-label | ReactNode | Open the dialog |
skip Skip button label | ReactNode | Skip |
Type definitions: props.ts.