2016-08-08 10:32:22 +08:00
---
order: 0
title: Ant Design of React
---
2016-09-10 11:01:59 +08:00
We supply a react implementation `antd` following Ant Design specification, which designed to help developing RIA such as dashboards or other enterprise-like complex UI needs.
2016-08-08 10:32:22 +08:00
< div class = "pic-plus" >
< img width = "150" src = "https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg" >
< span > +< / span >
< img width = "160" src = "https://t.alipayobjects.com/images/rmsweb/T16xRhXkxbXXXXXXXX.svg" >
< / div >
< style >
.pic-plus > * {
display: inline-block!important;
vertical-align: middle;
}
.pic-plus span {
font-size: 30px;
color: #aaa ;
margin: 0 20px;
}
< / style >
---
## Features
2016-09-10 11:01:59 +08:00
- Following Ant Design, a design language for creating user friendly and beautiful websites.
2016-08-08 10:32:22 +08:00
- It is a set of high quality UI components and based on [React Component ](http://react-component.github.io/badgeboard/ ).
- Provides a work flow which is based on npm, webpack, and babel, supporting ES2015 and TypeScript.
## Installation
```bash
$ npm install antd
```
2016-10-13 12:27:29 +08:00
## Usage
### Use prebuilt bundle
2016-08-08 10:32:22 +08:00
```jsx
import { DatePicker } from 'antd';
ReactDOM.render(< DatePicker / > , mountNode);
```
2016-10-13 12:27:29 +08:00
And import style manually:
2016-08-08 10:32:22 +08:00
```jsx
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```
2016-10-13 12:27:29 +08:00
### Use modularized antd
- Use [babel-plugin-import ](https://github.com/ant-design/babel-plugin-import ) (Recommended)
```js
// .babelrc
{
"plugins": [["import", { libraryName: "antd", style: "css" }]]
}
```
Then you can import components from antd directly.
```jsx
// import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from 'antd';
```
2016-08-08 10:32:22 +08:00
2016-10-13 12:27:29 +08:00
- Manually import
2016-08-08 10:32:22 +08:00
2016-10-13 12:27:29 +08:00
```jsx
import DatePicker from 'antd/lib/date-picker'; // just for js
import 'antd/lib/date-picker/style/css'; // with style
```
2016-08-08 10:32:22 +08:00
## Version
2016-09-29 14:32:15 +08:00
- Stable: [![npm package ](https://img.shields.io/npm/v/antd.svg?style=flat-square )](https://www.npmjs.org/package/antd)
2016-08-08 10:32:22 +08:00
- Beta: [![ ](https://cnpmjs.org/badge/v/antd.svg?&tag=beta&subject=npm )](https://www.npmjs.org/package/antd)
## Compatibility
2016-09-28 00:07:31 +08:00
Modern browsers and IE9+.
2016-08-08 10:32:22 +08:00
> [IE8 issues](https://github.com/xcatliu/react-ie8)
## Useful Links
- [Home Page ](http://ant.design/ )
- [Change Log ](/changelog )
- [Scaffold ](https://github.com/ant-design/antd-init/ )
- [Development Tools ](http://ant-tool.github.io/ )
- [React Component ](http://react-component.github.io/ )
- [Ant Design Mobile ](http://mobile.ant.design )
- [React Code Style ](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md )
- [Component Design Principles ](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md )
- [Design Handbook ](https://os.alipayobjects.com/rmsportal/HTXUgPGkyyxEivE.png )
- [Scaffold and Demo Supported by Community ](https://github.com/ant-design/ant-design/issues/129 )
2016-10-07 21:10:05 +08:00
## Who are using antd
2016-08-08 10:32:22 +08:00
2016-10-07 21:10:05 +08:00
- [Ant Financial ](http://www.antgroup.com/index.htm?locale=en_US )
- [Alibaba ](http://www.alibaba.com/ )
- [Koubei ](http://www.koubei.com/ )
- [Meituan ](http://www.meituan.com )
- [Didi ](http://www.xiaojukeji.com/ )
2016-08-08 10:32:22 +08:00
> If your company or product uses Ant Design, you are welcome to comment in [this issue]((https://github.com/ant-design/ant-design/issues/477)). Thank you!
## Contributing
Please read our [CONTRIBUTING.md ](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md ) first.
2016-10-19 12:19:30 +08:00
If you have any idea to improve antd, just create a [Pull Request ](https://github.com/ant-design/ant-design/pulls ). Also, you can also [issue ](https://github.com/ant-design/ant-design/issues/new ) bugs.
2016-08-08 10:32:22 +08:00
> Recommend to read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html), a smart question will get right answer quickly.
2016-10-19 12:19:30 +08:00
## Need Help?
You can ask questions while you meet problem through the following ways.
And we encourage experienced users to help those who are not familiar with `antd` .
2016-10-20 14:49:51 +08:00
We recommend to tag your questions with `antd` on Stack Overflow.
2016-10-19 14:04:46 +08:00
2016-10-20 14:49:51 +08:00
1. [Stack Overflow ](http://stackoverflow.com/questions/tagged/antd )(Recommended)
2016-10-19 12:19:30 +08:00
2. [![Join the chat at https://gitter.im/ant-design/ant-design ](https://badges.gitter.im/Join%20Chat.svg )](https://gitter.im/ant-design/ant-design?utm_source=badge& utm_medium=badge& utm_campaign=pr-badge& utm_content=badge)