Tour

A popup component for guiding users through a product. Available since 5.0.0.

When To Use

Use when you want to guide users through a product.

Examples

Basic

The most basic usage.

Placement

Change the placement of the guide relative to the target, there are 12 placements available. When target={null} the guide will show in the center.

Custom indicator

Custom indicator.

Custom mask style

Custom mask style.

API

Common props ref：Common props

Tour

Property	Description	Type	Default	Version
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean`\|`{ pointAtCenter: boolean}`	`true`
placement	Position of the guide card relative to the target element	`center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` `primary`	`default`
open	Open tour	`boolean`	-
onChange	Callback when the step changes. Current is the previous step	`(current: number) => void`	-
current	What is the current step	`number`	-
scrollIntoViewOptions	support pass custom scrollIntoView options	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0
indicatorsRender	custom indicator	`(current: number, total: number) => ReactNode`	-	5.2.0
zIndex	Tour's zIndex	number	1001	5.3.0

TourStep

Property	Description	Type	Default	Version
target	Get the element the guide card points to. Empty makes it show in center of screen	`() => HTMLElement` `HTMLElement`	-
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean` `{ pointAtCenter: boolean}`	`true`
cover	Displayed pictures or videos	`ReactNode`	-
title	title	`ReactNode`	-
description	description	`ReactNode`	-
placement	Position of the guide card relative to the target element	`center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` `primary`	`default`
nextButtonProps	Properties of the Next button	`{ children: ReactNode; onClick: Function }`	-
prevButtonProps	Properties of the previous button	`{ children: ReactNode; onClick: Function }`	-
scrollIntoViewOptions	support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0

Design Token

Global Token

API

Common props ref：Common props

Tour

Property	Description	Type	Default	Version
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean`\|`{ pointAtCenter: boolean}`	`true`
placement	Position of the guide card relative to the target element	`center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` `primary`	`default`
open	Open tour	`boolean`	-
onChange	Callback when the step changes. Current is the previous step	`(current: number) => void`	-
current	What is the current step	`number`	-
scrollIntoViewOptions	support pass custom scrollIntoView options	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0
indicatorsRender	custom indicator	`(current: number, total: number) => ReactNode`	-	5.2.0
zIndex	Tour's zIndex	number	1001	5.3.0

TourStep

Property	Description	Type	Default	Version
target	Get the element the guide card points to. Empty makes it show in center of screen	`() => HTMLElement` `HTMLElement`	-
arrow	Whether to show the arrow, including the configuration whether to point to the center of the element	`boolean` `{ pointAtCenter: boolean}`	`true`
cover	Displayed pictures or videos	`ReactNode`	-
title	title	`ReactNode`	-
description	description	`ReactNode`	-
placement	Position of the guide card relative to the target element	`center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight`	`bottom`
onClose	Callback function on shutdown	`Function`	-
mask	Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour	`boolean \| { style?: React.CSSProperties; color?: string; }`	`true`
type	Type, affects the background color and text color	`default` `primary`	`default`
nextButtonProps	Properties of the Next button	`{ children: ReactNode; onClick: Function }`	-
prevButtonProps	Properties of the previous button	`{ children: ReactNode; onClick: Function }`	-
scrollIntoViewOptions	support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour	`boolean \| ScrollIntoViewOptions`	`true`	5.2.0

Namu Design

Tour

Namu Design

Tour

When To Use

Examples

API

Tour

TourStep

Design Token

Global Token

When To Use

Examples

API

Tour

TourStep

Design Token

Global Token

TourChangelog

TourChangelog

When To Use

Examples

API

Tour

TourStep

Design Token

Global Token

When To Use

Examples

API

Tour

TourStep

Design Token

Global Token

Tour

Tour