node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Ant Design

Codecov Dependency Status

npm package NPM downloads Percentage of issues still open Gitter (English) Join the chat at中文)

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



  • 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

  • Modern browsers and Internet Explorer 9+ (with polyfills)
  • Server-side Rendering
  • Electron

Let's build a better antd together PRs Welcome

antd is an open source project; improvements are welcomed. If you are interested in contributing to antd, you can watch this repository, join in discussion, or try to implement some features which have been accepted. Actually, there are many ways to contribute. And we are always happy to offer collaborator permission for some active contributors.


npm install antd


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

  • 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
  • Use babel-plugin-import

    // .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';


  • Don't use @types/antd, antd provide a built-in ts definition already.

Use ts-import-plugin with modularized antd

  loader: "ts-loader", // or awesome-typescript-loader
  options {
    getCustomTransformers: () => ({
      before: [ tsImportPluginFactory({ libraryName: "antd", style: "css" }) ]


See i18n.



$ git clone
$ npm install
$ npm start

Open your browser and visit , see more at .


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