logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Overview
  • Common
    • Actions
    • Bubble
    • Conversations
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Confirm
    • ThoughtChain
  • Tools
    • useXAgent
    • useXChat
    • XStream
    • XRequest
    • XProvider

Welcome

Clearly convey the scope of intent and expected functionality to the user.
Importimport { Welcome } from "@ant-design/x";
Sourcecomponents/welcome
Docs
Edit this pageChangelog

Resources

Ant Design
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 the appropriate welcome recommendation component to effectively reduce the user's learning cost and allow the user to quickly understand and start smoothly.

Examples

API

WelcomeProps

PropertyDescriptionTypeDefaultVersion
classNamesCustom style class names for different parts of each prompt item.Record<'icon' | 'title' | 'description' | 'extra', string>--
descriptionThe description displayed in the prompt list.React.ReactNode--
extraThe extra operation displayed at the end of the prompt list.React.ReactNode--
iconThe icon displayed on the front side of the prompt list.React.ReactNode--
rootClassNameThe style class name of the root node.string--
stylesCustom styles for different parts of each prompt item.Record<'icon' | 'title' | 'description' | 'extra', React.CSSProperties>--
titleThe title displayed at the top of the prompt list.React.ReactNode--
variantVariant type.'filled' | 'borderless''filled'-

Semantic DOM

Design Token

Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Variant

Set the style variant through the variant property.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Background

Customize part of the style.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
icon

Hello, I'm Ant Design X

Base on Ant Design, AGI product interface solution, create a better intelligent vision~
  • icon
    Icon container
  • title
    Title container
  • description
    Description container
  • extra
    Extra content