Getting Started

Last updated on 2020-03-11 00:54:62


Ant Design Pro is a production-ready solution for admin interfaces. Built on the design principles developed by Ant Design, this project introduces higher level components; we have developed templates, components, and a corresponding design kit to improve the user and development experience for admin interfaces.

Your help is welcomed and much appreciated. With your feedback we can make incremental progress towards elegant and well designed components. Please open an issue or submit a pull request!

With those objectives in mind, we have built the following templates and a scaffold based on React.js, which should help you prototyping production-ready admin interfaces.

- Dashboard
  - Analytic
  - Monitor
  - Workspace
- Form
  - Basic Form
  - Step Form
  - Advanced Form
- List
  - Standard Table
  - Standard List
  - Card List
  - Search List (Project/Applications/Article)
- Profile
  - Simple Profile
  - Advanced Profile
- Result
  - Success
  - Failed
- Exception
  - 403
  - 404
  - 500
- Account
  - Account Center
  - Account Settings
- Graphic Editor
  - Flow Editor
  - Mind Editor
  - Koni Editor
- User
  - Login
  - Register
  - Register Result

All of the above pages can be found in Pro's Blocks.

Users of Ant Design Pro

Hundreds of applications within Ant Financial and Alibaba Group are using Ant Design Pro. You are welcome to leave your information in Ant Design Pro Users if you or your organization is using it.

For Designers

If you are a product manager or designer, you can find the design kit here.

For Developers

We will walk you through the steps to get started.


You will need yarn, node and git. The project is based on ES2015+, React, UmiJS, dva, g2 and antd. It would be helpful if you have pre-existing knowledge on those.


Create a new empty folder as project root. Execute command in the folder:

yarn create umi myApp


npm create umi myApp

Choose ant-design-pro

 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

Ant Design Pro will be installed automatically.


We have provided a scaffold which includes common routes for admins and demonstrates our component library. The project layout is as follows:

├── config                   # umi config, include routes and webpack etc.
├── mock                     # Local Mock Data
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # Local static files
│   ├── components           # Components
│   ├── e2e                  # Integrated Test Case
│   ├── layouts              # Common Layouts
│   ├── models               # Global dva Model
│   ├── pages                # Sub-pages and templates
│   ├── services             # Back-end Services
│   ├── utils                # Utility
│   ├── locales              # i18n resources
│   ├── global.less          # Global Stylesheet
│   └── global.ts            # Global JS
├── tests                    # Tests Configuration
└── package.json


Install Dependencies

$ npm install
$ npm start

This will automatically open http://localhost:8000. If you see the following page then you have succeeded.


You're all set!

We have built-in mock data, hot module reloading, state management,i18n, global router, etc. You can continue exploring other documents for more details on those topics.

Next Steps

> Block Development Quickly build standard pages.

> Traditional development mode, fully custom development.