Ant Design

An enterprise-class UI design language and React-based implementation.

📢 Document Translation Recruitment

We are now working on translate components document to English, and we need some translator and reviewer. ant-design#1471

Features

• An enterprise-class design language and high quality UI.
• Graceful UI components out of the box, base on React Component.
• A npm + webpack + babel + dora workflow.

Install

npm install antd

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-antd (Recommended)

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

  Then you can import components from antd directly.

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

• Manually import

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

Browser Support

Normal browsers and Internet Explorer 8+.

IE8 issues

TypeScript

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "preserve"
  }
}

Links

• Home page
• React UI page
• ChangeLog
• Scaffold tool
• Development tool
• React components
• Mobile UI
• React style guide
• React component design guide
• Developer Instruction
• Versioning Release Note
• Boilerplates
• FAQ
• CodePen boilerplate for bug reports
• Awesome Ant Design

Contributing

We welcome all contributions, please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as a GitHub issue. If you'd like to improve code, check out the Development Instruction and have a good time! :)