Tour

API reference and demos for Tour.

Source

Import

import { Tour } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

Provider Managed · Open in Storybook

Missing Anchor · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
anchorRoot	TourRootSource	—	Where anchors are queried. Defaults to `document`.
anchorTimeoutMs	number	—	Anchor wait budget for a same-route step, in ms.
backdropClassName	string	—	Classes applied to the dim layer, e.g. `bg-black/60`.
className	string	—	Classes applied to the step card.
closeOnEsc	boolean	—	Dismiss on Escape. Defaults to true.
definition*	TourDefinition	—	The tour to render. Validated on first mount.
index*	number	—	Zero-based index of the visible step, into `definition.steps`.
interaction	enum	—	Pointer behaviour of the dim layer.
keyboard	boolean	—	Bind arrow keys to Back/Next. Defaults to true. This preempts arrow-key page scrolling while the tour runs; set false to keep it.
labels	Partial<TourLabels>	—	Copy overrides; unset keys fall back to `DEFAULT_TOUR_LABELS`.
missingAnchor	enum	—	Policy when an anchor never appears. Defaults to `"center"`.
navigateTimeoutMs	number	—	Anchor wait budget after `onNavigate`, in ms.
onComplete*	(…) => void	—	The user reached the end.
onDismiss*	(…) => void	—	The user left early (Skip, Escape, close).
onIndexChange*	(…) => void	—	Requests a different step; the owner clamps and commits it.
onNavigate	(…) => …	—	Called when the entered step's `route` differs from the route the tour is already on. The library never imports a router.
onStatusChange	(…) => …	—	Reports the live step state, so a provider can expose it through `useTour()`.
onStepError	(…) => …	—	Reported on every anchor timeout, alongside a console warning.
padding	number	—	Default spotlight padding in px.
portalContainer	HTMLElement | null	—	Element the overlay portals into. Defaults to `document.body`. Pass a node inside your shadow tree so the overlay is shadow-styled and scoped — `FloatingPortal` takes an HTMLElement, not a ShadowRoot, which is why this is a separate prop from `anchorRoot`. Note `position: fixed` resolves against a transformed ancestor, so a transformed container scopes the dim to itself (wanted for an embedded demo, surprising in an app).
scrollIntoView	boolean	—	Scroll each anchor into view on entry. Defaults to true.