Ant Design of React

Following Ant Design specification, We develop a React UI library antd that contains a set of high quality components and demos for building rich interactive desktop applications.

+

Features#

  • Following Ant Design desktop specification.

  • It is a set of high quality UI components and based on React Component.

  • Provides a work flow which is based on npm, webpack, and babel, supporting ES2015 and TypeScript.

Compatibility#

Modern browsers and IE9+.

IE8 issues

Version#

  • Stable: npm package

  • Beta:

You can subscribe to this feed for new version notification: https://github.com/ant-design/ant-design/releases.atom

Installation#

Using npm to install#

We recommend using npm to install,it not only makes development easier,but you can also take advantage of the whole ecosystem.

If using npm to install, you could use import or require.

Stable version:

$ npm install antd --save

Beta version:

$ npm install antd@beta --save

Import in Browser#

CDNJS

We provide antd.js antd.css and antd.min.js antd.min.css under antd/dist in antd's npm package, in order to import all the components of antd directly. Also, you can use unpkg.

It's not recommended to use the already built files, as you cannot get bugfixes from the dependencies of antd.

stable#

beta#

Here is an example of how to build your own antd.js if you are using antd@<1.0.0.

Usage#

Use prebuilt bundle#

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

And import style manually:

import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

Use modularized antd#

  • Use babel-plugin-import (Recommended)

    // .babelrc
    {
      "plugins": [["import", { libraryName: "antd", style: "css" }]]
    }

    Then you can import components from antd directly.

    // import js and css modularly, parsed by babel-plugin-import
    import { DatePicker } from 'antd';
  • Manually import

    import DatePicker from 'antd/lib/date-picker';  // just for js
    import 'antd/lib/date-picker/style/css';  // with style

Who are using antd#

If your company or product uses Ant Design, you are welcome to comment in this issue. Thank you!

Contributing#

Please read our CONTRIBUTING.md first.

If you have any idea to improve antd, just create a Pull Request. Also, you can also issue bugs.

Recommend to read How To Ask Questions The Smart Way and How to Ask a Question in Open Source Community and How to Report Bugs Effectively, a smart question will get right answer quickly.

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.

We recommend to tag your questions with antd on Stack Overflow.

  1. Stack Overflow(Recommended)

  2. Join the chat at https://gitter.im/ant-design/ant-design