Tour API

Headless guided-tour compound: per-step Root context, activator registry, portaled content with CSS-anchor positioning, SVG highlight cutout, and keyboard chrome on top of createTour.

Explore these related pages for additional context and usage patterns.

Page	Category
Tour	Disclosure
useTour	Plugins
Dialog	Disclosure
Popover	Disclosure

Tour.Root

Props

step required

ID

Step id this root represents

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

TourRootSlotProps

Tour.Activator

Props

step required

any

Step id or ids this activator belongs to

padding

number | undefined

Extra padding reported to Tour.Highlight

scroll

boolean | undefined

Scroll the activator into view when its step becomes active

Default: true

scrollOptions

ScrollIntoViewOptions | undefined

Options forwarded to scrollIntoView

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

TourActivatorSlotProps

Tour.Content

Props

placement

any

Preferred placement relative to the activator

Default: "bottom"

offset

number | undefined

Gap from the activator or viewport edge, in px

Default: 16

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

TourContentSlotProps

Tour.Description

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

TourDescriptionSlotProps

Tour.Highlight

Props

opacity

number | undefined

Backdrop opacity (0–1)

Default: 0.5

padding

number | undefined

Extra padding around the cutout when the activator has none

Default: 0

blocking

boolean | undefined

Swallow clicks on the backdrop. Does not stop the tour.

Default: false

blockActivator

boolean | undefined

Swallow clicks on the cutout. Does not stop the tour.

Default: false

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

TourHighlightSlotProps

Tour.Keyboard

Props

string | undefined

Hotkey that moves to the previous step

Default: "arrowleft"

string | undefined

Hotkey that moves to the next step

Default: "arrowright"

stop

string | undefined

Hotkey that stops the tour

Default: "escape"

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

any

Tour.Next

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

disabled

boolean | undefined

Override disabled state

Default: false

Slots

default

TourNextSlotProps

Tour.Prev

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

disabled

boolean | undefined

Override disabled state

Default: false

Slots

default

TourPrevSlotProps

Tour.Progress

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

TourProgressSlotProps

Tour.Skip

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Events

skip

[]

Slots

default

TourSkipSlotProps

Tour.Title

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:tour"

Slots

default

TourTitleSlotProps