2023-12-12 19:03:37 +08:00
< div align = "center" > < a name = "readme-top" > < / a >
2015-12-06 17:40:04 +08:00
2023-12-12 19:03:37 +08:00
< img height = "180" src = "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" >
2018-09-02 12:20:54 +08:00
2023-12-12 19:03:37 +08:00
< h1 > Ant Design< / h1 >
2018-09-02 12:20:54 +08:00
2019-09-08 16:29:04 +08:00
An enterprise-class UI design language and React UI library.
2016-11-22 14:56:55 +08:00
2024-06-22 21:59:12 +08:00
[![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]
2020-04-06 12:41:53 +08:00
2024-07-18 19:09:22 +08:00
[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url]
2020-04-06 12:41:53 +08:00
2024-06-22 21:59:12 +08:00
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
2023-12-12 19:03:37 +08:00
2023-12-12 20:49:36 +08:00
[Changelog ](./CHANGELOG.en-US.md ) · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · [中文 ](./README-zh_CN.md )
2023-12-12 19:03:37 +08:00
![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
2020-04-06 12:41:53 +08:00
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
[npm-url]: http://npmjs.org/package/antd
2021-01-25 13:22:43 +08:00
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
2020-04-06 12:41:53 +08:00
[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
2020-04-06 12:43:07 +08:00
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
[download-url]: https://npmjs.org/package/antd
2020-04-06 12:41:53 +08:00
[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://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
2023-02-10 11:55:46 +08:00
[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
2020-04-06 12:41:53 +08:00
[twitter-url]: https://twitter.com/AntDesignUI
2024-07-18 19:09:22 +08:00
[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/antd/badge
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
2022-11-20 01:15:51 +08:00
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
[bundlephobia-url]: https://bundlephobia.com/package/antd
2023-06-20 19:39:17 +08:00
[issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square
[issues-helper-url]: https://github.com/actions-cool
2021-10-14 22:16:10 +08:00
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
2023-02-09 14:08:11 +08:00
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
2023-02-09 14:08:48 +08:00
[dumi-url]: https://github.com/umijs/dumi
2023-12-12 19:03:37 +08:00
[github-issues-url]: https://new-issue.ant.design
2024-06-22 21:59:12 +08:00
2018-09-02 12:20:54 +08:00
< / div >
2015-06-14 18:28:08 +08:00
2022-12-25 23:01:29 +08:00
[![ ](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png )](https://ant.design)
2018-09-10 18:50:43 +08:00
2018-09-02 12:31:26 +08:00
## ✨ Features
2015-06-14 18:28:08 +08:00
2019-12-16 22:42:08 +08:00
- 🌈 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.
2019-12-25 12:48:49 +08:00
- ⚙️ Whole package of design resources and development tools.
2019-12-16 22:42:08 +08:00
- 🌍 Internationalization support for dozens of languages.
2023-03-14 20:30:07 +08:00
- 🎨 Powerful theme customization based on CSS-in-JS.
2015-07-08 20:08:19 +08:00
2018-09-02 12:31:26 +08:00
## 🖥 Environment Support
2017-03-13 15:49:15 +08:00
2022-11-16 15:02:18 +08:00
- Modern browsers
2019-05-07 14:57:32 +08:00
- Server-side Rendering
2020-02-20 21:11:15 +08:00
- [Electron ](https://www.electronjs.org/ )
2017-03-13 15:49:15 +08:00
2022-11-18 16:53:01 +08:00
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /> ](http://godban.github.io/browsers-support-badges/ )< br > Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /> ](http://godban.github.io/browsers-support-badges/ )< br > Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /> ](http://godban.github.io/browsers-support-badges/ )< br > Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /> ](http://godban.github.io/browsers-support-badges/ )< br > Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" /> ](http://godban.github.io/browsers-support-badges/ )< br > Electron |
2020-02-27 10:53:30 +08:00
| --- | --- | --- | --- | --- |
2022-11-16 15:02:18 +08:00
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
2018-07-20 14:05:59 +08:00
2018-09-02 12:31:26 +08:00
## 📦 Install
2015-11-02 20:37:38 +08:00
```bash
2019-03-05 11:46:33 +08:00
npm install antd
2015-11-02 20:37:38 +08:00
```
2019-01-22 19:06:11 +08:00
```bash
yarn add antd
```
2023-09-05 23:15:20 +08:00
```bash
pnpm add antd
```
2018-09-02 12:31:26 +08:00
## 🔨 Usage
2015-07-03 12:21:29 +08:00
2023-10-29 14:04:47 +08:00
```tsx
2019-12-16 22:42:08 +08:00
import { Button, DatePicker } from 'antd';
2023-11-30 23:34:05 +08:00
export default () => (
2019-12-16 22:42:08 +08:00
< >
< Button type = "primary" > PRESS ME< / Button >
2020-05-16 21:48:33 +08:00
< DatePicker placeholder = "select date" / >
2019-12-16 22:42:08 +08:00
< />
);
2015-12-16 15:04:51 +08:00
```
2015-10-27 22:17:54 +08:00
2018-09-02 12:31:26 +08:00
## 🔗 Links
2015-06-14 18:28:08 +08:00
2020-05-15 17:18:55 +08:00
- [Home page ](https://ant.design/ )
2020-11-18 18:49:58 +08:00
- [Components Overview ](https://ant.design/components/overview )
2017-11-01 10:50:27 +08:00
- [Ant Design Pro ](http://pro.ant.design/ )
2016-11-14 11:08:26 +08:00
- [Change Log ](CHANGELOG.en-US.md )
2017-03-12 15:20:25 +08:00
- [rc-components ](http://react-component.github.io/ )
2016-07-29 13:52:05 +08:00
- [Mobile UI ](http://mobile.ant.design )
2023-01-16 13:39:23 +08:00
- [Mini Program UI ](http://mini.ant.design )
2020-11-18 18:49:58 +08:00
- [Ant Design Pro Components ](https://procomponents.ant.design )
- [Ant Design Charts ](https://charts.ant.design )
2019-07-01 11:05:17 +08:00
- [Ant Design Icons ](https://github.com/ant-design/ant-design-icons )
- [Ant Design Colors ](https://github.com/ant-design/ant-design-colors )
2018-11-28 12:33:09 +08:00
- [Landing Pages ](https://landing.ant.design )
2016-11-09 18:17:41 +08:00
- [Motion ](https://motion.ant.design )
2018-11-28 12:33:09 +08:00
- [Scaffold Market ](http://scaffold.ant.design )
2016-03-31 00:20:10 +08:00
- [Developer Instruction ](https://github.com/ant-design/ant-design/wiki/Development )
2016-06-23 13:27:23 +08:00
- [Versioning Release Note ](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B )
2018-09-16 15:34:58 +08:00
- [FAQ ](https://ant.design/docs/react/faq )
2024-07-30 17:34:22 +08:00
- [Stackblitz Demo ](https://u.ant.design/reproduce ) for bug reports
2020-05-15 17:18:55 +08:00
- [Customize Theme ](https://ant.design/docs/react/customize-theme )
2020-03-25 18:01:24 +08:00
- [How to Apply for Being A Collaborator ](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator )
2016-11-09 18:17:41 +08:00
2018-09-02 12:31:26 +08:00
## ⌨️ Development
2017-03-12 15:20:25 +08:00
2019-02-08 10:01:01 +08:00
Use Gitpod, a free online dev environment for GitHub.
[![Open in Gitpod ](https://gitpod.io/button/open-in-gitpod.svg )](https://gitpod.io/#https://github.com/ant-design/ant-design)
2024-04-12 11:46:53 +08:00
Or use opensumi.run, a free online pure front-end dev environemt.
[![opensumi.run ](https://custom-icon-badges.demolab.com/badge/opensumi-run-blue.svg?logo=opensumi )](https://opensumi.run/ide/ant-design/ant-design)
2019-02-08 10:01:01 +08:00
Or clone locally:
2017-03-12 15:20:25 +08:00
```bash
$ git clone git@github.com:ant-design/ant-design.git
2018-02-11 11:07:42 +08:00
$ cd ant-design
2017-03-12 15:20:25 +08:00
$ npm install
$ npm start
```
2018-07-20 14:05:59 +08:00
Open your browser and visit http://127.0.0.1:8001 , see more at [Development ](https://github.com/ant-design/ant-design/wiki/Development ).
2017-03-12 15:20:25 +08:00
2018-09-02 12:31:26 +08:00
## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
2018-09-02 12:30:15 +08:00
2024-05-07 17:44:10 +08:00
< 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 >
2023-11-30 23:34:05 +08:00
2023-11-05 17:07:50 +08:00
Let's build a better antd together.
2015-10-19 16:05:50 +08:00
2024-05-07 17:44:10 +08:00
We warmly invite contributions from everyone. Before you get started, please take a moment to review our [Contributing Guide ](https://ant.design/docs/react/contributing ). Feel free to share your ideas through [Pull Requests ](https://github.com/ant-design/ant-design/pulls ) or [GitHub Issues ](https://github.com/ant-design/ant-design/issues ). If you're interested in enhancing our codebase, explore the [Development Instructions ](https://github.com/ant-design/ant-design/wiki/Development ) and enjoy your coding journey! :)
2018-12-10 11:36:22 +08:00
2024-05-07 17:44:10 +08:00
For collaborators, adhere to our [Pull Request Principle ](https://github.com/ant-design/ant-design/wiki/PR-principle ) and utilize our [Pull Request Template ](https://github.com/ant-design/ant-design/wiki/PR-principle#pull-request-template ) when creating a Pull Request.
2018-12-30 17:10:40 +08:00
2023-09-02 15:04:17 +08:00
[![Let's fund issues in this repository ](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg )](https://issuehunt.io/repos/34526884)
2019-08-31 17:06:23 +08:00
2019-09-02 23:15:16 +08:00
## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
2019-08-31 17:06:23 +08:00
[![ ](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36 )](https://opencollective.com/ant-design#support)
2019-09-02 23:15:16 +08:00
[![ ](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36 )](https://opencollective.com/ant-design#support)