logoAnt Design X

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

XProvider

Provide a uniform configuration support for x components.
Importimport { XProvider } from "@ant-design/x";
Sourcecomponents/x-provider
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

Use

The XProvider extends the ConfigProvider from antd and provides global configuration for components in @ant-design/x.

If you are already using ConfigProvider from antd, please make the following changes to your code:

diff
- import { ConfigProvider } from 'antd';
+ import { XProvider } from '@ant-design/x';
const App = () => (
- <ConfigProvider>
+ <XProvider>
<YourApp />
- </ConfigProvider>
+ </XProvider>
);

Examples

API

XProvider fully extends antd's ConfigProvider. Props ref:Antd ConfigProvider

Component Config

PropertyDescriptionTypeDefaultVersion
bubbleGlobal configuration for the Bubble component'classNames' | 'styles' | 'className' | 'style'-
conversationsGlobal configuration for the Conversations component'classNames' | 'styles' | 'className' | 'style'-
promptsGlobal configuration for the Prompts component'classNames' | 'styles' | 'className' | 'style'-
senderGlobal configuration for the Sender component'classNames' | 'styles' | 'className' | 'style'-
suggestionGlobal configuration for the Suggestion component'className' | 'style'-
thoughtChainGlobal configuration for the ThoughtChain component'classNames' | 'styles' | 'className' | 'style'-
actionsGlobal configuration for the Actions component'className' | 'style'-
Use

Usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Direction:
  • Conversation - 1
  • Conversation - 2
Hello Ant Design X!
Hello World!
Ignite Your Creativity
Tell me a Joke
Hello Ant Design X!status: success
Ant Design X help you build AI chat/platform app as ready-to-use 📦.
Hello World!status: success
Pending...status: pending