Repository: ant-design/ant-design
Stars: 97800
CLAUDE.md
Ant Design 项目开发指南
本文件为 AI 编程助手提供项目上下文和开发规范。
项目信息
- React 组件库，发布为 npm 包 antd
- 使用 TypeScript 和 React 开发
- 采用 CSS-in-JS 架构（基于 @ant-design/cssinjs）
- 支持 Design Token 主题系统、暗色模式、RTL 布局、SSR、国际化（150+ 语言）
项目结构
ant-design/
├── components/ # 组件源代码（84+ 组件）
│ ├── component-name/ # 单个组件目录
│ │ ├── ComponentName.tsx # 主组件实现
│ │ ├── demo/ # 演示代码（.tsx 和 .md）
│ │ ├── style/ # 样式系统（index.ts / token.ts）
│ │ ├── __tests__/ # 单元测试
│ │ ├── index.en-US.md # 英文文档
│ │ ├── index.zh-CN.md # 中文文档
│ │ └── index.tsx # 导出入口
│ ├── _util/ # 共享工具函数库
│ ├── theme/ # 主题系统
│ └── locale/ # 国际化文本
├── tests/ # 测试工具和共享测试
├── docs/ # 站点文档
├── CHANGELOG.zh-CN.md # 中文更新日志
└── CHANGELOG.en-US.md # 英文更新日志---
Demo 导入规范
- 本规范同时适用于 components//demo/ 和 .dumi/ 下的示例、站点、主题相关文件。（semantic.test.tsx 文件除外）
- 在这些目录下引入 Ant Design 组件、组件内部模块、工具方法、变量、类型定义时，一律使用绝对路径导入，不使用相对路径导入。
- 允许的导入形式应优先使用项目公开入口或已配置别名，例如：antd、antd/es/、antd/lib/、antd/locale/、.dumi/、@@/*。
- 禁止使用 ..、../xxx、../../xxx、./xxx 这类相对路径去引用组件实现、内部模块、方法、变量、类型，包含跨 demo、跨目录复用的场景。
- demo 与 .dumi 文件之间不要互相相对引用；如果需要复用少量逻辑，优先内联，或提取到可通过绝对路径访问的公共位置。
Test 导入规范
- 本规范适用于 components//__tests__/ 下的测试文件。
- 在这些目录下引入 Ant Design 组件，或引入组件内部模块、工具方法、变量、类型定义时，一律使用相对路径导入，不使用绝对路径导入。
- 测试文件应优先从当前组件目录、相邻内部模块或共享测试工具目录通过相对路径引用，例如：..、../index、../xxx、../../_util/、../../../tests/shared/。
- 禁止在 __tests__ 目录下使用 antd、antd/es/、antd/lib/、antd/locale/、.dumi/、@@/* 这类绝对路径或别名路径去引用仓库内代码。
- 如需引用仓库外第三方依赖，仍按依赖包名正常导入，例如 react、@testing-library/react、dayjs。
---
文档规范
API 表格格式
| Property | Description | Type | Default | Version |
| -------- | ----------- | ---------------------- | --------- | ------- |
| disabled | 是否禁用 | boolean | false | - |
| type | 按钮类型 | primary \| default | default | - |
- 字符串默认值用反引号，布尔/数字直接写，无默认值用 -
- API 按字母顺序排列，新增属性需声明版本号
文档锚点 ID 规范
- 中文标题必须手动指定英文锚点：## 中文标题 {#english-anchor-id}
- 锚点 ID 符合 ^[a-zA-Z][\w-:\.]*$，长度不超过 32 字符
- FAQ 章节下的锚点必须以 faq- 为前缀
- 同一问题的中英文锚点保持一致
国际化规范
- 本地化配置文件：components/locale/，命名如 zh_CN.ts、en_US.ts
- 添加或修改本地化配置时，需同时修改所有语言文件
- 类型入口：components/locale/index.tsx
---
PR 规范
标题与内容
- PR 标题始终使用英文，格式：类型: 简短描述
- PR 内容默认使用英文，可根据用户语言习惯决定使用中文或英文
- 示例：fix: fix button style issues in Safari browser
PR 模板（必须使用）
- 英文模板：.github/PULL_REQUEST_TEMPLATE.md
- 中文模板：.github/PULL_REQUEST_TEMPLATE_CN.md
- 使用 gh pr create 创建 PR 时，必须手动填充模板内容
分支策略
- 新特性开发需基于 feature 分支，PR 目标分支也需为 feature
- 其余提交至 master 分支
- 分支命名规范：
- 功能开发：feat/description-of-feature
- 问题修复：fix/issue-number-or-description
- 文档更新：docs/what-is-changed
- 代码重构：refactor/what-is-changed
PR 改动类型
- 🆕 新特性提交
- 🐞 Bug 修复
- 📝 文档改进
- 📽️ 演示代码改进
- 💄 样式/交互改进
- 🤖 TypeScript 更新
- 📦 包体积优化
- ⚡️ 性能优化
- 🌐 国际化改进
---
Changelog 规范
核心原则
- 文件位置：CHANGELOG.en-US.md 和 CHANGELOG.zh-CN.md
- 必须同时提供中英文两个版本
- 忽略用户无感知的改动（内部重构、纯测试更新、工具链优化等）
- 描述"对开发者的影响"，而非"具体的实现细节"
- 尽量给出 PR 链接，并统一添加贡献者链接
格式规范
#### 条目格式
- Emoji 置顶：每条以 Emoji 开头
- 不加冒号：组件名后不使用英文冒号
- 每条必含组件名：正文必须出现对应组件名
- 组件名不用反引号：Modal、Button 等；属性名/API 用反引号
- 中英空格：中文与英文、数字、链接之间保留一个空格
#### 句式
| 语言 | 格式 | 示例 |
| --- | --- | --- |
| 中文 | Emoji 动词 组件名 描述（动词在前） | 🐞 修复 Button 在暗色主题下 \color\ 的问题。 |
| 英文 | Emoji 动词 组件名 描述（动词在前） | 🐞 Fix Button reversed \hover\ colors in dark theme. |
#### 分组逻辑
- 同一组件有 2 条以上改动时，使用 - 组件名 作为分类标题
- 单项改动直接写单行条目
Emoji 规范
| Emoji | 用途 |
| ------ | ---------------------- |
| 🐞 | 修复 Bug |
| 💄 | 样式更新或 token 更新 |
| 🆕 | 新增特性 / 新增属性 |
| 🔥 | 极其值得关注的新增特性 |
| 🇺🇸🇨🇳🇬🇧 | 国际化改动 |
| 📖 📝 | 文档或网站改进 |
| ✅ | 新增或更新测试用例 |
| 🛎 | 更新警告/提示信息 |
| ⌨️ ♿ | 可访问性增强 |
| 🗑 | 废弃或移除 |
| 🛠 | 重构或工具链优化 |
| ⚡️ | 性能提升 |
每条 Changelog 仅选择一个 Emoji，不要在同一条目中叠加多个 Emoji。
编写 Changelog 时，请参考 CHANGELOG.zh-CN.md 和 CHANGELOG.en-US.md 中已有条目的格式。
---
参考资源
- API Naming Rules - API 命名规范
- 轮值规则和版本发布流程 - 版本发布流程
- Unique Panel Component - 独立面板组件规范
README.md
<div align="center"><a name="readme-top"></a>
<img height="180" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
<h1>Ant Design</h1>
An enterprise-class UI design language and React UI library.
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url]
[![Follow Twitter][twitter-image]][twitter-url] [![dumi][dumi-image]][dumi-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url] [![LFX Active Contributors][lfx-image]][lfx-url]
Changelog · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · 中文
❤️ Sponsors 
<a href="https://tractian.com"><img src="https://images.opencollective.com/tractian/0235da9/logo/256.png" width="128" height="128" alt="TRACTIAN"></a>
<a href="https://lobehub.com"><img src="https://unpkg.com/@lobehub/[email protected]/icons/lobehub-color.svg" width="128" height="128" alt="LobeHub"></a>
<a href="https://youmind.com"><img src="https://marketing-assets.youmind.com/logo-512.png" width="128" height="128" alt="YouMind"></a>
[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
[npm-url]: https://npmjs.org/package/antd
[github-action-image]: https://github.com/ant-design/ant-design/actions/workflows/test.yml/badge.svg
[github-action-url]: https://github.com/ant-design/ant-design/actions/workflows/test.yml
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
[download-url]: https://npmjs.org/package/antd
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
[help-wanted-image]: https://img.shields.io/github/issues/ant-design/ant-design/help%20wanted?color=green&style=flat-square
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
[twitter-url]: https://twitter.com/AntDesignUI
[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/antd/badge
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/antd?style=flat-square
[bundlephobia-url]: https://bundlephobia.com/package/antd
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
[dumi-url]: https://github.com/umijs/dumi
[github-issues-url]: https://new-issue.ant.design
[lfx-image]: https://insights.linuxfoundation.org/api/badge/active-contributors?project=ant-design-ant-design&repos=https://github.com/ant-design/ant-design
[lfx-url]: https://insights.linuxfoundation.org/project/ant-design-ant-design/repository/ant-design-ant-design
</div>
✨ Features
- 🌈 Enterprise-class UI designed for web applications.
- 📦 A set of high-quality React components out of the box.
- 🛡 Written in TypeScript with predictable static types.
- ⚙️ Whole package of design resources and development tools.
- 🌍 Internationalization support for dozens of languages.
- 🎨 Powerful theme customization based on CSS-in-JS.
🖥 Environment Support
- Modern browsers
- Server-side Rendering
- Electron
| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" /><br>Electron |
| --- | --- | --- | --- | --- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
📦 Install
npm install antdyarn add antdpnpm add antdbun add antd🔨 Usage
import { Button, DatePicker } from 'antd';export default () => (
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
);
🔗 Links
- Home page
- Components Overview
- Sponsor
- Change Log
- rc-components
- 🆕 Ant Design X
- Ant Design Pro
- Pro Components
- Ant Design Mobile
- Ant Design Mini
- Ant Design Charts
- Ant Design Web3
- Landing Pages
- Ant Motion
- Scaffold Market
- Developer Instruction
- Versioning Release Note
- FAQ
- Online Playground for bug reports
- Customize Theme
- How to Apply for Being A Collaborator
⌨️ Development
Use opensumi.run, a free online pure front-end dev environment.
Or clone locally:
$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm startOpen your browser and visit http://127.0.0.1:8001, see more at Development.
🤝 Contributing 
<table>
<tr>
<td>
<a href="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors?repo_id=34526884" target="_blank" style="display: block" align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="280">
<img alt="Top Contributors of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=light" width="280">
</picture>
</a>
</td>
<td rowspan="2">
<a href="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats?repo_id=34526884" target="_blank" style="display: block" align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="655" height="auto">
<img alt="Performance Stats of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=light" width="655" height="auto">
</picture>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://next.ossinsight.io/widgets/official/compose-org-active-contributors?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884" target="_blank" style="display: block" align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884&image_size=2x3&color_scheme=dark" width="273" height="auto">
<img alt="New participants of ant-design - past 28 days" src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884&image_size=2x3&color_scheme=light" width="273" height="auto">
</picture>
</a>
</td>
</tr>
</table>
<a href="https://openomy.app/github/ant-design/ant-design" target="_blank" style="display: block; width: 100%;" align="center">
<img src="https://openomy.app/svg?repo=ant-design/ant-design&chart=bubble&latestMonth=3" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" />
</a>
Let's build a better antd together.
We warmly invite contributions from everyone. Before you get started, please take a moment to review our Contribution Guide. Feel free to share your ideas through Pull Requests or GitHub Issues. If you're interested in enhancing our codebase, explore the Development Instructions and enjoy your coding journey! :)
For collaborators, adhere to our Pull Request Principle and utilize our Pull Request Template when creating a Pull Request.
Issue funding
We use Issuehunt to up-vote and promote specific features that you would like to see and implement. Check our backlog and help us:
❤️ Backers 
