Ant Design is an enterprise-class UI design language and React component library developed for building high-quality web applications. This page introduces the purpose, core features, design philosophy, architecture, and ecosystem overview of the Ant Design codebase.
For detailed guidance on usage, architecture, and ecosystem, please see the related child pages:
@rc-component, dayjs, @ant-design/cssinjs, and their roles in the system.Ant Design (antd) is a comprehensive React UI library implementing the Ant Design specification aimed at enterprise-level web products, especially for middle and back-end management systems.
llms.txt) to help AI agents understand component paradigms package.json88 CHANGELOG.en-US.md31Sources: package.json1-42 README.md1-57 docs/react/introduce.en-US.md1-40 CHANGELOG.en-US.md18-31
The antd package is structured to support various consumption patterns, from modern tree-shaking bundlers to legacy browser environments.
Map of Distribution Entities:
The package defines entry points for different environments: main for CommonJS, module for ES modules, and unpkg for browser-ready minified scripts package.json32-34 It also includes a BUG_VERSIONS.json file used for tracking specific version issues package.json37
Sources: package.json32-42 webpack.config.js1-94 README.md68-85
Ant Design is built on a layered architecture that separates design logic, functional primitives, and styling.
System Hierarchy and Code Associations:
ConfigProvider, which manages global settings like locale, theme, and component-specific defaults docs/react/i18n.en-US.md10-23 The App component further simplifies context management for feedback components like Modal and message docs/react/customize-theme.en-US.md27@ant-design/cssinjs and @ant-design/cssinjs-utils for dynamic style generation, supporting features like zeroRuntime and design tokens package.json116-117 docs/react/customize-theme.en-US.md74-88@rc-component namespace that handle complex logic like positioning, accessibility, and state management package.json122-156Sources: package.json109-162 README.md49-56 docs/react/introduce.en-US.md1-27 docs/react/customize-theme.en-US.md11-28
Ant Design v5 and v6 utilize a layered design token system to provide powerful customization while maintaining visual consistency.
| Token Layer | Purpose | Configuration Location |
|---|---|---|
| Seed Tokens | Base design values (e.g., colorPrimary, borderRadius) | theme.token in ConfigProvider |
| Map Tokens | Derived values for states (e.g., colorPrimaryHover) | Calculated via algorithms |
| Alias Tokens | Semantic tokens for specific UI patterns | Derived from Map tokens |
| Component Tokens | Component-specific overrides (e.g., headerPadding) | theme.components in ConfigProvider |
The system supports dynamic theme switching and preset algorithms such as darkAlgorithm and compactAlgorithm docs/react/customize-theme.en-US.md39-43 Recent updates also include support for zeroRuntime modes where styles are extracted statically docs/react/customize-theme.en-US.md74-88
Sources: README.md55 package.json100-101 docs/react/customize-theme.en-US.md30-60
The build process transforms source code into multiple formats using a combination of antd-tools and webpack.
Build Flow:
compile script uses antd-tools to generate ESM and CJS outputs package.json52-53dist script generates minified UMD bundles. Special configurations like addLocales create bundles including all internationalization files webpack.config.js10-84style script builds CSS files, supporting advanced features like CSS layers package.json77-82Sources: webpack.config.js1-94 package.json32-100 README.md68-85
Ant Design follows Semantic Versioning 2.0.0 CHANGELOG.en-US.md8
The library maintains a rigorous quality process including visual regression testing and automated changelog generation package.json64-99
Sources: CHANGELOG.en-US.md1-15 package.json2-108
This high-level introduction orientates you to the purpose, structure, and main technical aspects of the Ant Design project. For further detail on specific topics:
This layered breakdown supports architecting complex UI while enabling customization, scalability, and maintainability needed for enterprise applications.
Refresh this wiki
This wiki was recently refreshed. Please wait 4 days to refresh again.