ProComponents is a template component based on Ant Design that provides a higher level of abstraction support out of the box. It can significantly improve the efficiency of creating CRUD pages and focus more on them.

  • ProLayout solves layout problems, provides out-of-the-box menu and breadcrumb functionality
  • ProTable Form template component, abstracting web requests and form formatting
  • ProForm Form template component, presets common layouts and behaviors
  • ProCard provides card slicing and raster layout capabilities
  • ProDescriptions Definition list template component, a companion component to ProTable
  • ProSkeleton Page level skeleton screen

ProComponents is focused on middle and backend CRUD and has a lot of pre-defined styles and behaviors. These behaviors and styles can be difficult to change, so if your business requires rich customization it is recommended to use Ant Design directly.


Currently each component of ProComponents is a separate package, you need to install the corresponding npm package in your project and use it.

$ npm i @ant-design/pro-components --save

Current ProComponents provides the following components for direct use.

  • npm i @ant-design/pro-components --save

Using in a project

Each package is a separate component package, and is used in the following example.

import { ProForm, ProFormText } from '@ant-design/pro-components';
export default () => {
return (
onFinish={async (values) => {
<ProFormText name="name" label="姓名" />