Create codesandbox to try Ant Design
Visit https://u.ant.design/reproduce to create a codesandbox. Press the save button to create a new instance.
getting-started
257 notes in this subject, read out of this brain and free to use. This is page 1 of 5.
Prerequisites for Ant Design React
Before starting with Ant Design React, learn React first and correctly install and configure Node.js v16 or above. Intermediate knowledge about HTML, CSS, JavaScript, and React is recommended. If you are just starting to learn front-end or React, using a UI framework may not be the best first step.
First example with DatePicker and message
Here is a working example showing how to use Ant Design components: import React, { useState } from 'react'; import { DatePicker, message } from 'antd'; import { createRoot } from 'react-dom/client'; import './index.css'; const App = () => { const [date, setDate] = useState(null); const [messageApi, contextHolder] = message.useMessage(); const handleChange = (value) => { messageApi.info(`Selected Date: ${value ? value.format('YYYY-MM-DD') : 'None'}`); setDate(value); }; return ( <div style={{ width: 400, margin: '100px auto' }}> <DatePicker onChange={handleChange} /> <div style={{ marginTop: 16 }}> Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'} </div> {contextHolder} </div> ); }; createRoot(document.getElementById('root')).render(<App />);
Ant Design supports tree shaking
The antd package supports tree shaking of ES modules, so using import { Button } from 'antd'; drops JavaScript code you did not use.
First example code with ConfigProvider locale
This example demonstrates how to set up a basic Ant Design React application with Chinese locale support using ConfigProvider, DatePicker, and message components. It shows importing dayjs for date formatting and using the message API hook via message.useMessage(). ```jsx import React, { useState } from 'react'; import { ConfigProvider, DatePicker, message } from 'antd'; import dayjs from 'dayjs'; import { createRoot } from 'react-dom/client'; import 'dayjs/locale/zh-cn'; import zhCN from 'antd/locale/zh_CN'; import './index.css'; dayjs.locale('zh-cn'); const App = () => { const [date, setDate] = useState(null); const [messageApi, contextHolder] = message.useMessage(); const handleChange = (value) => { messageApi.info(`您选择的日期是: ${value ? value.format('YYYY年MM月DD日') : '未选择'}`); setDate(value); }; return ( <ConfigProvider locale={zhCN}> <div style={{ width: 400, margin: '100px auto' }}> <DatePicker onChange={handleChange} /> <div style={{ marginTop: 16 }}> 当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'} </div> </div> {contextHolder} </ConfigProvider> ); }; creatRoot(document.getElementById('root')).render(<App />); ```
Ant Design React minimum requirements
Ant Design React requires Node.js v16 or above. It is recommended to have intermediate knowledge of HTML, CSS, and JavaScript, and to be proficient with the React ecosystem before using Ant Design.
ConfigProvider locale example
import { ConfigProvider } from 'antd'; import frFR from 'antd/locale/fr_FR'; return ( <ConfigProvider locale={frFR}> <App /> </ConfigProvider> );
Default language in Ant Design
The default language of Ant Design is English.
ConfigProvider for internationalization
Ant Design provides a React Component called ConfigProvider for configuring antd locale text globally. Import the desired locale (e.g., fr_FR from 'antd/locale/fr_FR') and wrap your App component with ConfigProvider, passing the locale as a prop.
Supported languages in Ant Design
Ant Design supports the following 60+ languages: Arabic (ar_EG), Azerbaijani (az_AZ), Bulgarian (bg_BG), Bangla (bn_BD), Belarusian (by_BY), Catalan (ca_ES), Czech (cs_CZ), Danish (da_DK), German (de_DE), Greek (el_GR), English UK (en_GB), English US (en_US), Spanish (es_ES), Basque (eu_ES), Estonian (et_EE), Persian (fa_IR), Finnish (fi_FI), French Belgium (fr_BE), French Canada (fr_CA), French France (fr_FR), Irish (ga_IE), Galician (gl_ES), Hebrew (he_IL), Hindi (hi_IN), Croatian (hr_HR), Hungarian (hu_HU), Armenian (hy_AM), Indonesian (id_ID), Italian (it_IT), Icelandic (is_IS), Japanese (ja_JP), Georgian (ka_GE), Kurdish Kurmanji (kmr_IQ), Kannada (kn_IN), Kazakh (kk_KZ), Khmer (km_KH), Korean (ko_KR), Lithuanian (lt_LT), Latvian (lv_LV), Macedonian (mk_MK), Malayalam (ml_IN), Marathi (mr_IN), Mongolian (mn_MN), Malay (ms_MY), Burmese (my_MM), Norwegian (nb_NO), Nepali (ne_NP), Dutch Belgium (nl_BE), Dutch (nl_NL), Polish (pl_PL), Portuguese Brazil (pt_BR), Portuguese (pt_PT), Romanian (ro_RO), Russian (ru_RU), Sinhalese (si_LK), Slovak (sk_SK), Serbian (sr_RS), Slovenian (sl_SI), Swedish (sv_SE), Tamil (ta_IN), Thai (th_TH), Turkish (tr_TR), Turkmen (tk_TK), Urdu (ur_PK), Ukrainian (uk_UA), Uzbek Latin (uz_UZ), Vietnamese (vi_VN), Chinese Simplified (zh_CN), Chinese Traditional Hong Kong (zh_HK), Chinese Traditional Taiwan (zh_TW).
Browser import of Ant Design
Ant Design can be imported in the browser by adding script and link tags and using the global variable `antd`. The npm package provides `antd.js`, `antd.min.js`, and `reset.css` under the `dist` folder. These files can also be downloaded from CDNJS, jsDelivr, or unpkg. Prerequisites include importing `react`, `react-dom`, and `dayjs` before using `antd.js`.
Ant Design of React library overview
Ant Design of React is a React UI library called `antd` that follows the Ant Design specification. It contains a set of high quality components and demos for building rich, interactive user interfaces.
Ant Design does not recommend loading entire files
Loading entire Ant Design files from a CDN is strongly discouraged as it adds bloat to the application and makes it more difficult to receive bugfixes and updates. Ant Design is intended to be used with a build tool like webpack to import only the needed parts.
Ant Design ES modules tree shaking
Ant Design supports ES modules tree shaking by default.
Ant Design TypeScript support
Ant Design provides built-in TypeScript definitions. Do not install `@types/antd` as it is not needed.
Ant Design Pro i18n documentation
For a complete internationalization project example, refer to the Ant Design Pro internationalization documentation at https://pro.ant.design/zh-CN/docs/i18n.
ConfigProvider locale prop for i18n
Ant Design provides a React component called ConfigProvider that accepts a locale prop for global internationalization configuration. The locale value should be imported from antd/locale/<language_code>. For example, import zhCN from 'antd/locale/zh_CN' and pass it as <ConfigProvider locale={zhCN}><App /></ConfigProvider>. For date-picker internationalization, you also need to import the corresponding dayjs locale, such as import 'dayjs/locale/zh-cn'.
Supported languages and locale codes
Ant Design supports the following language locale codes: ar_EG (Arabic), az_AZ (Azerbaijani), bg_BG (Bulgarian), bn_BD (Bengali Bangladesh), by_BY (Belarusian), ca_ES (Catalan), cs_CZ (Czech), da_DK (Danish), de_DE (German), el_GR (Greek), en_GB (English GB), en_US (English US), es_ES (Spanish), eu_ES (Basque), et_EE (Estonian), fa_IR (Persian), fi_FI (Finnish), fr_BE (French Belgium), fr_CA (French Canada), fr_FR (French France), ga_IE (Irish), gl_ES (Galician), he_IL (Hebrew), hi_IN (Hindi), hr_HR (Croatian), hu_HU (Hungarian), hy_AM (Armenian), id_ID (Indonesian), it_IT (Italian), is_IS (Icelandic), ja_JP (Japanese), ka_GE (Georgian), km_KH (Khmer), kmr_IQ (Northern Kurdish), kn_IN (Kannada), kk_KZ (Kazakh), ko_KR (Korean), lt_LT (Lithuanian), lv_LV (Latvian), mk_MK (Macedonian), ml_IN (Malayalam), mr_IN (Marathi India), mn_MN (Mongolian), ms_MY (Malay Malaysia), my_MM (Burmese), nb_NO (Norwegian), ne_NP (Nepali), nl_BE (Dutch Belgium), nl_NL (Dutch), pl_PL (Polish), pt_BR (Portuguese Brazil), pt_PT (Portuguese), ro_RO (Romanian), ru_RU (Russian), si_LK (Sinhala), sk_SK (Slovak), sr_RS (Serbian), sl_SI (Slovenian), sv_SE (Swedish), ta_IN (Tamil), th_TH (Thai), tr_TR (Turkish), tk_TK (Turkmen), ur_PK (Urdu Pakistan), uk_UA (Ukrainian), uz_UZ (Uzbek Latin), vi_VN (Vietnamese), zh_CN (Simplified Chinese), zh_HK (Traditional Chinese Hong Kong), zh_TW (Traditional Chinese Taiwan).
Recommendation against using pre-built Ant Design files
Using pre-built antd.js or antd.min.js files is strongly discouraged because it prevents on-demand loading and makes it difficult to obtain quick bug fixes for underlying dependency modules. It is recommended to use npm, yarn, pnpm, or bun for development.
Ant Design basic example with DatePicker
Here is a basic example of using Ant Design: import React from 'react'; import { DatePicker } from 'antd'; const App = () => { return <DatePicker />; }; export default App;
Browser-based Ant Design usage
Ant Design can be used in the browser by directly including script and link tags in HTML files, and accessing the global variable 'antd'. The npm package provides antd.js, antd.min.js, and reset.css in the dist directory. These files are also available on CDNJS, jsDelivr, or UNPKG. Note: antd.js and antd.min.js depend on react, react-dom, and dayjs, which must be included before antd.
Ant Design tree shaking support
antd supports tree shaking by default based on ES modules, allowing for automatic removal of unused code during the build process.
Install Ant Design via bun
Install antd using bun with the command: bun add antd
Install Ant Design via pnpm
Install antd using pnpm with the command: pnpm install antd --save
Install Ant Design via yarn
Install antd using yarn with the command: yarn add antd
Ant Design React library purpose and target audience
antd is a React UI component library based on the Ant Design design system. It is suitable for enterprise-level mid- and back-office products and front-end desktop websites.
Ant Design version support history
antd 2.0 and later no longer supports IE8. antd 4.0 and later no longer supports React 15 and IE9/10. antd 5.0 and later no longer supports IE. antd 6.0 and later no longer supports React 16/17.
What is LLMs.txt
LLMs.txt is a format supported by Ant Design for making documentation available to large language models. This feature helps AI tools better understand the component library, its APIs, and usage patterns.
Single component documentation URLs with .md suffix
Individual component documentation can be accessed by adding the .md suffix to the original component documentation URL. English documentation is available at https://ant.design/components/{component-name}.md and Chinese documentation at https://ant.design/components/{component-name}-cn.md, for example https://ant.design/components/button.md for the Button component in English.
LLMs.txt aggregated files for Ant Design documentation
Ant Design provides multiple aggregated files to help AI tools access documentation: llms.txt is a navigation file containing links to all documentation and components; design.md describes the default Light theme design language for AI design tools following the google-labs-code/design.md specification; llms-full.txt contains complete component documentation in English with implementation details and examples; llms-full-cn.txt contains complete component documentation in Chinese; llms-semantic.md contains component semantic descriptions in English including DOM structure and usage patterns; llms-semantic-cn.md contains component semantic descriptions in Chinese.
Accessing individual component documentation in Markdown format
Individual component documentation in Markdown format can be accessed by appending '.md' to the component documentation URL. English documentation is available at https://ant.design/components/{componentname}.md and Chinese documentation is available at https://ant.design/components/{componentname}-cn.md.
Using Ant Design LLMs.txt with AI coding tools
Ant Design documentation can be integrated with various AI tools: Cursor uses @Docs feature or .cursor/rules; Windsurf uses .windsurf/rules or cascade memories; Claude Code uses CLAUDE.md or /memory persistence; Codex uses .codex/settings.json or AGENTS.md; Gemini CLI uses --context parameter or .gemini/config.json; Trae uses project knowledge source settings; Qoder uses .qoder/config.yml or @docs in conversation; Neovate Code runs neovate and uses prompts; Qwen Code is an open-source terminal AI agent that supports @file references. The recommended prompt for all tools is: 'Read https://ant.design/llms-full.txt and understand the Ant Design component library, use this knowledge when writing Ant Design code.'
Component semantic documentation files
Each component has a corresponding semantic description file accessible at https://ant.design/components/{componentname}/semantic.md for English and https://ant.design/components/{componentname}-cn/semantic.md for Chinese. Semantic documentation contains component parts and their purposes, usage examples and best practices, and a DOM structure overview.
Alternative to MCP: LLMs.txt support
If your AI tool does not support MCP, Ant Design provides LLMs.txt support with two files: llms.txt (structured overview of all components) and llms-full.txt (complete documentation with examples). These are available at ant.design/llms.txt and ant.design/llms-full.txt.
MCP Server definition and purpose
Model Context Protocol (MCP) is an open protocol that enables AI models to interact with external tools and data sources. Through MCP, AI assistants can access real-time documentation, code examples, and API reference materials.
Notification deprecated API changes in v6
Notification component: btn is deprecated, use actions instead. message is deprecated, use title instead.
Menu deprecated API changes in v6
Menu component: children is deprecated, use items instead.
Mentions deprecated API changes in v6
Mentions component: Mentions.Option is deprecated, use options instead.
Input deprecated API changes in v6
Input component: bordered is deprecated, use variant instead.
FloatButton deprecated API changes in v6
FloatButton component: description is deprecated, use content instead.
Empty deprecated API changes in v6
Empty component: imageStyle is deprecated, use styles.image instead.
Drawer deprecated API changes in v6
Drawer component deprecated APIs: headerStyle→styles.header, bodyStyle→styles.body, footerStyle→styles.footer, contentWrapperStyle→styles.wrapper, maskStyle→styles.mask, drawerStyle→styles.section, classNames.content→classNames.section, styles.content→styles.section, maskClosable→mask.closable (v6.3.0), destroyInactivePanel→destroyOnHidden, width→size, height→size.
DatePicker deprecated API changes in v6
DatePicker component deprecated APIs: dropdownClassName→classNames.popup.root, popupClassName→classNames.popup.root, popupStyle→styles.popup.root, bordered→variant, onSelect→onCalendarChange. These apply to both DatePicker and DatePicker.RangePicker.
ConfigProvider deprecated API changes in v6
ConfigProvider: dropdownMatchSelectWidth is deprecated, use popupMatchSelectWidth instead.
Collapse deprecated API changes in v6
Collapse component: destroyInactivePanel→destroyOnHidden, expandIconPosition→expandIconPlacement. Collapse.Panel: disabled→collapsible="disabled".
Carousel deprecated API changes in v6
Carousel component: dotPosition is deprecated, use dotPlacement instead.
Card deprecated API changes in v6
Card component deprecated APIs: headStyle→styles.header, bodyStyle→styles.body, bordered→variant, tab→label.
Calendar deprecated API changes in v6
Calendar component deprecated APIs: dateFullCellRender→fullCellRender, dateCellRender→cellRender, monthFullCellRender→fullCellRender, monthCellRender→cellRender.
Button deprecated API changes in v6
Button component: iconPosition is deprecated, use iconPlacement instead.
Breadcrumb deprecated API changes in v6
Breadcrumb component deprecated APIs: routes→items, Breadcrumb.Item and Breadcrumb.Separator→items, breadcrumbName→title, items.children→menu.
Avatar deprecated API changes in v6
Avatar component: size="default" is deprecated, use size="medium" instead (as of v6.3.0). Avatar.Group: maxCount→max={{ count: number }}, maxStyle→max={{ style: CSSProperties }}, maxPopoverPlacement→max={{ popover: PopoverProps }}, maxPopoverTrigger→max={{ popover: PopoverProps }}.
Anchor deprecated API changes in v6
Anchor component: children property is deprecated, use items instead.
Alert deprecated API changes in v6
Alert component deprecated APIs: closeText→closable.closeIcon, closeIcon→closable.closeIcon, message→title, onClose→closable.onClose, afterClose→closable.afterClose. These properties are marked as deprecated and will show console warnings. They will be removed in v7.0.
Image deprecated API changes in v6
Image component deprecated APIs: wrapperStyle→styles.root, visible→open, onVisibleChange→onOpenChange, maskClassName→classNames.cover, rootClassName→classNames.root, toolbarRender→actionsRender.
v6 DOM structure changes may affect custom styles
v6 has upgraded and optimized the DOM structure of many components to improve maintainability and consistency. For projects using antd styles normally, this has no impact. However, if the project has custom styles targeting internal DOM nodes of components (such as depending on specific selectors or hierarchy), styles may need to be manually checked and adjusted after upgrade.
v6 migration preparation steps
Before upgrading to v6, first upgrade to the latest v5 version and handle deprecated APIs according to console warnings. Confirm the project runs on React 18 or higher. v6 only supports modern browsers and uses CSS variables by default, with no IE support.
v6 requires React 18 or higher
Ant Design v6 requires React version >= 18. React 17 and below are no longer supported. The package @ant-design/v5-patch-for-react-19 is no longer needed and can be removed if present.
Modal deprecated API changes in v6
Modal component deprecated APIs: bodyStyle→styles.body, maskStyle→styles.mask, destroyOnClose→destroyOnHidden, maskClosable→mask.closable (v6.3.0), focusTriggerAfterClose→focusable.focusTriggerAfterClose (v6.2.0).
Descriptions deprecated API changes in v6
Descriptions component deprecated APIs: children→items, labelStyle→styles.label, contentStyle→styles.content, size="default"→size="large" (v6.3.2), size="middle"→size="medium" (v6.3.2).
Select deprecated API changes in v6
Select component deprecated APIs: dropdownMatchSelectWidth→popupMatchSelectWidth, dropdownStyle→styles.popup.root, dropdownClassName→classNames.popup.root, popupClassName→classNames.popup.root, dropdownRender→popupRender, onDropdownVisibleChange→onOpenChange, bordered→variant, showArrow is deprecated and will become default behavior (can hide by setting suffixIcon to null).