Ant Design

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

Features

• An enterprise-class design language and high quality UI.
• Graceful UI components out of the box, base on React Component.
• Writen in TypeScript with complete define types.
• A npm + webpack + babel + dora + dva development framework.

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-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
  

Browser Support

Normal browsers and Internet Explorer 9+.

IE8 issues

TypeScript

tsconfig.json

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

Links

• Home page
• UI library
• ChangeLog
• Scaffold tool
• Development tool
• React components
• Mobile UI
• Motion
• 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! :)