Docs Examples Ark Plus

Components

Tour

Tour

A guided tour that helps users understand the interface.

API Reference

Root

Prop	Default	Type
`tour`		`UseTourReturn`
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`onExitComplete`		`() => void` Function called when the animation ends in the closed state
`present`		`boolean` Whether the node is present (controlled by the user)
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.

ActionTrigger

Prop	Default	Type
`action`		`StepAction`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	tour
`[data-part]`	action-trigger
`[data-type]`	The type of the item
`[data-disabled]`	Present when disabled

Arrow

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

ArrowTip

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Backdrop

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	tour
`[data-part]`	backdrop
`[data-state]`	"open" \| "closed"

CloseTrigger

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	tour
`[data-part]`	close-trigger
`[data-type]`	The type of the item

Content

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	tour
`[data-part]`	content
`[data-state]`	"open" \| "closed"
`[data-type]`	The type of the item
`[data-placement]`	The placement of the content
`[data-step]`

Description

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	tour
`[data-part]`	description
`[data-placement]`	The placement of the description

Positioner

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	tour
`[data-part]`	positioner
`[data-type]`	The type of the item
`[data-placement]`	The placement of the positioner

ProgressText

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Spotlight

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Title

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	tour
`[data-part]`	title
`[data-placement]`	The placement of the title

Prev page

Tooltip

Next page

Tree View