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

ConfigProvider

Provide a uniform configuration support for components.
Importimport { ConfigProvider } from "antd";
Sourcecomponents/config-provider
Docs
Edit this pageChangelog

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

Usage

This component provides a configuration to all React components underneath itself via the context API. In the render tree all components will have access to the provided config.

tsx
import React from 'react';
import { ConfigProvider } from 'antd';
// ...
const Demo: React.FC = () => (
<ConfigProvider direction="rtl">
<App />
</ConfigProvider>
);
export default Demo;

Content Security Policy

Some components use dynamic style to support wave effect. You can config csp prop if Content Security Policy (CSP) is enabled:

tsx
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>

Examples

API

PropertyDescriptionTypeDefaultVersion
componentDisabledConfig antd component disabledboolean-4.21.0
componentSizeConfig antd component sizesmall | middle | large-
cspSet Content Security Policy config{ nonce: string }-
directionSet direction of layout. See demoltr | rtlltr
getPopupContainerTo set the container of the popup element. The default is to create a div element in bodyfunction(triggerNode)() => document.body
getTargetContainerConfig Affix, Anchor scroll target container() => HTMLElement() => window4.2.0
iconPrefixClsSet icon prefix classNamestringanticon4.11.0
localeLanguage package setting, you can find the packages in antd/localeobject-
popupMatchSelectWidthDetermine whether the dropdown menu and the select input are the same width. Default set min-width same as input. Will ignore when value less than select width. false will disable virtual scrollboolean | number-5.5.0
popupOverflowSelect like component popup logic. Can set to show in viewport or follow window scroll'viewport' | 'scroll'
Preview
'viewport'5.5.0
prefixClsSet prefix classNamestringant
renderEmptySet empty content of components. Ref Emptyfunction(componentName: string): ReactNode-
themeSet theme, ref Customize ThemeTheme-5.0.0
variantSet variant of data entry componentsoutlined | filled | borderless-5.19.0
virtualDisable virtual scroll when set to falseboolean-4.3.0
warningConfig warning level, when strict is false, it will aggregate deprecated information into a single message{ strict: boolean }-5.10.0

ConfigProvider.config()

Setting Modal, Message, Notification static config. Not work on hooks.

tsx
ConfigProvider.config({
// 5.13.0+
holderRender: (children) => (
<ConfigProvider
prefixCls="ant"
iconPrefixCls="anticon"
theme={{ token: { colorPrimary: 'red' } }}
>
{children}
</ConfigProvider>
),
});

ConfigProvider.useConfig() 5.3.0+

Available since 5.2.0. Get the value of the parent Provider. Such as DisabledContextProvider, SizeContextProvider.

jsx
const {
componentDisabled, // 5.3.0+
componentSize, // 5.3.0+
} = ConfigProvider.useConfig();
PropertyDescriptionTypeDefaultVersion
componentDisabledantd component disabled stateboolean-5.3.0
componentSizeantd component size statesmall | middle | large-5.3.0

Component Config

PropertyDescriptionTypeDefaultVersion
alertSet Alert common props{ className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode }-5.7.0, closeIcon: 5.14.0
anchorSet Anchor common props{ className?: string, style?: React.CSSProperties }-5.7.0
avatarSet Avatar common props{ className?: string, style?: React.CSSProperties }-5.7.0
badgeSet Badge common props{ className?: string, style?: React.CSSProperties, classNames?: BadgeProps["classNames"], styles?: BadgeProps["styles"] }-5.7.0
breadcrumbSet Breadcrumb common props{ className?: string, style?: React.CSSProperties }-5.7.0
buttonSet Button common props{ className?: string, style?: React.CSSProperties, classNames?: ButtonProps["classNames"], styles?: ButtonProps["styles"], autoInsertSpace?: boolean, variant?: ButtonVariantType, color?: ButtonColorType }-5.6.0, autoInsertSpace: 5.17.0, variant and color: 5.25.0
cardSet Card common props{ className?: string, style?: React.CSSProperties, classNames?: CardProps["classNames"], styles?: CardProps["styles"] }-5.7.0, classNames and styles: 5.14.0
calendarSet Calendar common props{ className?: string, style?: React.CSSProperties }-5.7.0
carouselSet Carousel common props{ className?: string, style?: React.CSSProperties }-5.7.0
cascaderSet Cascader common props{ className?: string, style?: React.CSSProperties, classNames?: CascaderProps["classNames"], styles?: CascaderProps["styles"] }-5.7.0, classNames and styles: 5.25.0
checkboxSet Checkbox common props{ className?: string, style?: React.CSSProperties }-5.7.0
collapseSet Collapse common props{ className?: string, style?: React.CSSProperties, expandIcon?: (props) => ReactNode }-5.7.0, expandIcon: 5.15.0
colorPickerSet ColorPicker common props{ className?: string, style?: React.CSSProperties }-5.7.0
datePickerSet datePicker common props{ className?: string, style?: React.CSSProperties, classNames?: DatePickerConfig["classNames"], styles?: DatePickerConfig["styles"] }-5.7.0, classNames 和 styles: 5.25.0
rangePickerSet rangePicker common props{ className?: string, style?: React.CSSProperties }-5.11.0
descriptionsSet Descriptions common props{ className?: string, style?: React.CSSProperties, classNames?: DescriptionsProps["classNames"], styles?: DescriptionsProps["styles"] }-5.7.0, classNames and styles: 5.23.0
dividerSet Divider common props{ className?: string, style?: React.CSSProperties }-5.7.0
drawerSet Drawer common props{ className?: string, style?: React.CSSProperties, classNames?: DrawerProps["classNames"], styles?: DrawerProps["styles"], closeIcon?: ReactNode }-5.7.0, classNames and styles: 5.10.0, closeIcon: 5.14.0
dropdownSet Dropdown common props{ className?: string, style?: React.CSSProperties }-5.11.0
emptySet Empty common props{ className?: string, style?: React.CSSProperties, classNames?: EmptyProps["classNames"], styles?: EmptyProps["styles"] }-5.7.0, classNames and styles: 5.23.0
flexSet Flex common props{ className?: string, style?: React.CSSProperties, vertical?: boolean }-5.10.0
floatButtonGroupSet FloatButton.Group common props{ closeIcon?: React.ReactNode }-5.16.0
formSet Form common props{ className?: string, style?: React.CSSProperties, validateMessages?: ValidateMessages, requiredMark?: boolean | optional, scrollToFirstError?: boolean | Options }-requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className and style: 5.7.0
imageSet Image common props{ className?: string, style?: React.CSSProperties, preview?: { closeIcon?: React.ReactNode } }-5.7.0, closeIcon: 5.14.0
inputSet Input common props{ autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean | { clearIcon?: ReactNode } }-4.2.0, allowClear: 5.15.0
textAreaSet TextArea common props{ autoComplete?: string, className?: string, style?: React.CSSProperties, allowClear?: boolean | { clearIcon?: ReactNode } }-5.15.0
layoutSet Layout common props{ className?: string, style?: React.CSSProperties }-5.7.0
listSet List common props{ className?: string, style?: React.CSSProperties, item?:{ classNames: ListItemProps["classNames"], styles: ListItemProps["styles"] } }-5.7.0
menuSet Menu common props{ className?: string, style?: React.CSSProperties, expandIcon?: ReactNode | props => ReactNode }-5.7.0, expandIcon: 5.15.0
mentionsSet Mentions common props{ className?: string, style?: React.CSSProperties }-5.7.0
messageSet Message common props{ className?: string, style?: React.CSSProperties }-5.7.0
modalSet Modal common props{ className?: string, style?: React.CSSProperties, classNames?: ModalProps["classNames"], styles?: ModalProps["styles"], closeIcon?: React.ReactNode }-5.7.0, classNames and styles: 5.10.0, closeIcon: 5.14.0
notificationSet Notification common props{ className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode }-5.7.0, closeIcon: 5.14.0
paginationSet Pagination common props{ showSizeChanger?: boolean, className?: string, style?: React.CSSProperties }-5.7.0
progressSet Progress common props{ className?: string, style?: React.CSSProperties }-5.7.0
radioSet Radio common props{ className?: string, style?: React.CSSProperties }-5.7.0
rateSet Rate common props{ className?: string, style?: React.CSSProperties }-5.7.0
resultSet Result common props{ className?: string, style?: React.CSSProperties }-5.7.0
skeletonSet Skeleton common props{ className?: string, style?: React.CSSProperties }-5.7.0
segmentedSet Segmented common props{ className?: string, style?: React.CSSProperties }-5.7.0
selectSet Select common props{ className?: string, showSearch?: boolean, style?: React.CSSProperties, classNames?: SelectProps["classNames"], styles?: SelectProps["styles"] }-5.7.0, classNames and styles: 5.25.0
sliderSet Slider common props{ className?: string, style?: React.CSSProperties, classNames?: SliderProps["classNames"], styles?: SliderProps["styles"] }-5.7.0, classNames and styles: 5.23.0
switchSet Switch common props{ className?: string, style?: React.CSSProperties }-5.7.0
spaceSet Space common props, ref Space{ size: small | middle | large | number, className?: string, style?: React.CSSProperties, classNames?: SpaceProps["classNames"], styles?: SpaceProps["styles"] }-5.6.0
splitterSet Splitter common props{ className?: string, style?: React.CSSProperties }-5.21.0
spinSet Spin common props{ className?: string, style?: React.CSSProperties, indicator?: React.ReactElement }-5.7.0, indicator: 5.20.0
statisticSet Statistic common props{ className?: string, style?: React.CSSProperties }-5.7.0
stepsSet Steps common props{ className?: string, style?: React.CSSProperties }-5.7.0
tableSet Table common props{ className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } }-5.7.0, expandable: 5.14.0
tabsSet Tabs common props{ className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: start | center | end }, moreIcon?: ReactNode, addIcon?: ReactNode, removeIcon?: ReactNode }-5.7.0, moreIcon and addIcon: 5.14.0, removeIcon: 5.15.0
tagSet Tag common props{ className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode }-5.7.0, closeIcon: 5.14.0
timelineSet Timeline common props{ className?: string, style?: React.CSSProperties }-5.7.0
timePickerSet TimePicker common props{ className?: string, style?: React.CSSProperties, classNames?: TimePickerConfig["classNames"], styles?: TimePickerConfig["styles"] }-5.7.0, classNames 和 styles: 5.25.0
tourSet Tour common props{ closeIcon?: React.ReactNode }-5.14.0
tooltipSet Tooltip common props{ className?: string, style?: React.CSSProperties, classNames?:Tooltip["classNames"], styles?: Tooltip["styles"] }-5.23.0
popoverSet Popover common props{ className?: string, style?: React.CSSProperties, classNames?:Popover["classNames"], styles?: Popover["styles"] }-5.23.0
popconfirmSet Popconfirm common props{ className?: string, style?: React.CSSProperties, classNames?:Popconfirm["classNames"], styles?: Popconfirm["styles"] }-5.23.0
transferSet Transfer common props{ className?: string, style?: React.CSSProperties, selectionsIcon?: React.ReactNode }-5.7.0, selectionsIcon: 5.14.0
treeSet Tree common props{ className?: string, style?: React.CSSProperties }-5.7.0
treeSelectSet TreeSelect common props{ classNames?:TreeSelect["classNames"], styles?: TreeSelect["styles"] }-5.25.0
typographySet Typography common props{ className?: string, style?: React.CSSProperties }-5.7.0
uploadSet Upload common props{ className?: string, style?: React.CSSProperties }-5.7.0
waveConfig wave effect{ disabled?: boolean, showEffect?: (node: HTMLElement, info: { className, token, component }) => void }-5.8.0

FAQ

How to contribute a new language?

See <Adding new language>.

Date-related components locale is not working?

See FAQ Date-related-components-locale-is-not-working?

Modal throw error when setting getPopupContainer?

Related issue: https://github.com/ant-design/ant-design/issues/19974

When you config getPopupContainer to parentNode globally, Modal will throw error of triggerNode is undefined because it did not have a triggerNode. You can try the fix below.

diff
<ConfigProvider
- getPopupContainer={triggerNode => triggerNode.parentNode}
+ getPopupContainer={node => {
+ if (node) {
+ return node.parentNode;
+ }
+ return document.body;
+ }}
>
<App />
</ConfigProvider>

Why can't ConfigProvider props (like prefixCls and theme) affect ReactNode inside message.info, notification.open, Modal.confirm?

antd will dynamic create React instance by ReactDOM.render when call message methods. Whose context is different with origin code located context. We recommend useMessage, useNotification and useModal which , the methods came from message/notification/Modal has been deprecated in 5.x.

Locale is not working with Vite in production mode?

Related issue: #39045

In production mode of Vite, default exports from cjs file should be used like this: enUS.default. So you can directly import locale from es/ directory like import enUS from 'antd/es/locale/en_US' to make dev and production have the same behavior.

prefixCls priority(The former is covered by the latter)

  1. ConfigProvider.config({ prefixCls: 'prefix-1' })
  2. ConfigProvider.config({ holderRender: (children) => <ConfigProvider prefixCls="prefix-2">{children}</ConfigProvider> })
  3. message.config({ prefixCls: 'prefix-3' })
Locale

Components which need localization support are listed here, you can toggle the language in the demo.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Direction

Components which support rtl direction are listed here, you can toggle the direction in the demo.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Component size

Config component default size.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Theme

Modify theme by theme prop.

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

Wave effect brings dynamic. Use component to determine which component use it. You can also use HappyProvider from @ant-design/happy-work-theme to implement dynamic wave effect.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Static function

Use holderRender to set the Provider for the static methods message,modal,notification.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Change locale of components:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 / page
Click to confirm
0 item
No data
No data
0 item
No data
No data
2025
May
SuMoTuWeThFrSa
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
03
04
05
06
07
Name
Age
No data
No data

QR code expired

Preview
image.pngimage.png
Uploading...
image.png
image.png
Tour
Change direction of components:
Cascader example
یک مورد انتخاب کنید
    With search:  
Select an item

Switch example
      
Radio Group example

Button example

Tree example
parent 1
parent 1-0
leaf
leaf
parent 1-1
sss

Input (Input Group) example


Option1



Http://
.com

Select example
مورچه
 
مورچه
مورچه
Select a person
TreeSelect example
Please select

Modal example

Steps example
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.

1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.

Rate example

* Note: Half star not implemented in RTL direction, it will be supported after rc-rate implement rtl support.
Badge example
5


Pagination example
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 / page

Grid System example

* Note: Every calculation in RTL grid system is from right side (offset, push, etc.)

col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6
col-18 col-push-6
col-6 col-pull-18
Tab 1
Tab 2
Tab 3
Content of Tab Pane 1
demo
Card
NameAge
John Brown32
Jim Green42
Joe Black32
  • 1