logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Tour

A popup component for guiding users through a product.
Importimport { Tour } from "antd";
Sourcecomponents/tour
Docs
Edit this pageChangelog
Versionsupported since 5.0.0

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

Use when you want to guide users through a product.

Examples

API

Common props ref:Common props

Tour

PropertyDescriptionTypeDefaultVersion
arrowWhether to show the arrow, including the configuration whether to point to the center of the elementboolean|{ pointAtCenter: boolean}true
closeIconCustomize close iconReact.ReactNodetrue5.9.0
disabledInteractionDisable interaction on highlighted area.booleanfalse5.13.0
gapControl the radius of the highlighted area and the offset between highlighted area and the element.{ offset?: number | [number, number]; radius?: number }{ offset?: 6 ; radius?: 2 }5.0.0 (array type offset: 5.9.0)
placementPosition of the guide card relative to the target elementcenter left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRightbottom
onCloseCallback function on shutdownFunction-
maskWhether to enable masking, change mask style and fill color by pass custom propsboolean | { style?: React.CSSProperties; color?: string; }true
typeType, affects the background color and text colordefault primarydefault
openOpen tourboolean-
onChangeCallback when the step changes. Current is the previous step(current: number) => void-
currentWhat is the current stepnumber-
scrollIntoViewOptionssupport pass custom scrollIntoView optionsboolean | ScrollIntoViewOptionstrue5.2.0
indicatorsRendercustom indicator(current: number, total: number) => ReactNode-5.2.0
actionsRendercustom action(originNode: ReactNode, info: { current: number, total: number }) => ReactNode-5.25.0
zIndexTour's zIndexnumber10015.3.0
getPopupContainerSet the rendering node of Tour floating layer(node: HTMLElement) => HTMLElementbody5.12.0

TourStep

PropertyDescriptionTypeDefaultVersion
targetGet the element the guide card points to. Empty makes it show in center of screen() => HTMLElement | HTMLElement-
arrowWhether to show the arrow, including the configuration whether to point to the center of the elementboolean { pointAtCenter: boolean}true
closeIconCustomize close iconReact.ReactNodetrue5.9.0
coverDisplayed pictures or videosReactNode-
titletitleReactNode-
descriptiondescriptionReactNode-
placementPosition of the guide card relative to the target elementcenter left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRightbottom
onCloseCallback function on shutdownFunction-
maskWhether to enable masking, change mask style and fill color by pass custom props, the default follows the mask property of Tourboolean | { style?: React.CSSProperties; color?: string; }true
typeType, affects the background color and text colordefault primarydefault
nextButtonPropsProperties of the Next button{ children: ReactNode; onClick: Function }-
prevButtonPropsProperties of the previous button{ children: ReactNode; onClick: Function }-
scrollIntoViewOptionssupport pass custom scrollIntoView options, the default follows the scrollIntoViewOptions property of Tourboolean | ScrollIntoViewOptionstrue5.2.0

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
closeBtnSizeClose button sizenumber22
primaryNextBtnHoverBgHover background color of next button in primary typestringrgb(240,240,240)
primaryPrevBtnBgBackground color of previous button in primary typestringrgba(255,255,255,0.15)
zIndexPopupTour popup z-indexnumber1070
Global TokenHow to use?
Basic

The most basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom indicator

Custom indicator.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom highlighted area style

Using gap to control the radius of highlight area and the offset between highlight area and the element.

  • Setting offset in two directions individually and offset with array type is not supported until 5.9.0.
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Non-modal

Use mask={false} to make Tour non-modal. At the meantime it is recommended to use with type="primary" to emphasize the guide itself.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom mask style

Custom mask style.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom action

Custom action.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.25.0
Radius:
offset:
Horizontal offset:
Vertical offset: