ant-design/docs/react/introduce.en-US.md

order	title
0	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

• An enterprise-class UI design language for web applications.
• A set of high-quality React components out of the box.
• Written in TypeScript with complete define types.
• A npm + webpack + dva front-end development workflow.

Environment Support

• Browser: Modern browsers and Internet Explorer 9+
• Server-side Rendering
• Electron

Version

• Stable:
• Beta:

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

Installation

Using npm or yarn

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

$ npm install antd --save

$ yarn add antd

If you are in a bad network enviornment，you can try other registers and tools like cnpm.

Import in Browser

Add script and link tag in your browser and use global variable antd.

We provide antd.js antd.css and antd.min.js antd.min.css under antd/dist in antd's npm package. Also you can download from or unpkg.

We are strongly not recommended to use these built files, that make you import all components with large size, and you cannot get bugfixes from the dependencies of antd.

Usage

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 or babel-loader option
  {
    "plugins": [
      ["import", { libraryName: "antd", style: "css" }] // `style: true` for less
    ]
  }
  

  Then you can import components from antd, equivalent to import manually below.

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

• Manually import

  import DatePicker from 'antd/lib/date-picker';  // for js
  import 'antd/lib/date-picker/style/css';        // for css
  // import 'antd/lib/date-picker/style';         // that will import less
  

TypeScript

// tsconfig.json
{
 "compilerOptions": {
   "moduleResolution": "node",
   "jsx": "preserve",
   "allowSyntheticDefaultImports": true
 }
}

Note:

• set allowSyntheticDefaultImports to prevent error TS1192: Module 'react' has no default export.
• Don't use @types/antd, antd provide a built-in ts definition already.

Links

• Home Page
• UI library
• Change Log
• Scaffold tool
• rc-components
• Mobile UI
• Motion
• Developer Instruction
• Versioning Release Note
• Boilerplates
• FAQ
• CodePen boilerplate for bug reports
• Awesome Ant Design
• Customize Theme

Who are using antd

• Ant Financial
• Alibaba
• Koubei
• Meituan
• Didi

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.