logoAnt Design X

DesignDevelopmentComponentsX SDKX MarkdownPlayground
  • Overview
  • Common
    • Bubble
    • Conversations
    • Notification
  • Feedback
    • Actions
    • Think
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Confirmation
    • ThoughtChain
  • Tools
    • useXAgent
    • useXChat
    • XStream
    • XRequest
    • XProvider

Think

Show deep thinking process.
Importimport { Think } from "@ant-design/x";
Sourcecomponents/think
Docs
Edit this page

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

Used to show deep thinking process.

Examples

API

Common props ref:Common props

ThinkProps

PropertyDescriptionTypeDefaultVersion
classNamesDOM classRecord<SemanticDOM, string>--
stylesDOM styleRecord<SemanticDOM, CSSProperties>--
childrenThink ContentReact.ReactNode--
titleText of statusReact.ReactNode--
iconShow iconReact.ReactNode--
loadingLoadingboolean | React.ReactNodefalse-
defaultExpandedDefault Expand statebooleantrue-
expandedExpand stateboolean--
onExpandCallback when expand changes(expand: boolean) => void--

Semantic DOM

Design Token

Global TokenHow to use?
Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Status

Customize status text and status icon.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Expand

Control expand and collapse state.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
deep thinking
This is deep thinking content.

Complete thinking
This is deep thinking content.

Complete thinking
Customize status icon.

deep thinking
This is deep thinking content.
deep thinking
This is deep thinking content.
  • root
    Root
  • status
    Status
  • content
    Content