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.
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.
If you are a product manager or designer, you can find the design kit here.
We will walk you through the steps to get started.
Create a new empty folder as project root. Execute command in the folder:
yarn create umi myApp
npm create umi myApp
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 ├── README.md └── package.json
$ 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.
> Block Development Quickly build standard pages.
> Traditional development mode, fully custom development.