Skip to main content

​
Prerequisites

Before installing ProComponents, ensure your project meets these requirements:

React

Version 18.0.0 or higher

Ant Design

Version 6.0.0 or higher
ProComponents is built on top of Ant Design and requires it as a peer dependency. Both React and React DOM must be installed in your project.

​
Installation

Install ProComponents using your preferred package manager: 
npm install @ant-design/pro-components

​
Installing Peer Dependencies

If you haven’t already installed Ant Design and React in your project, you’ll need to install them as well: 
npm install antd react react-dom

​
Package Contents

The @ant-design/pro-components package is an all-in-one bundle that includes:
  • ProTable - Advanced data table component
  • ProForm - Enhanced form components with multiple layouts
  • ProLayout - Complete page layout solution
  • ProCard - Statistics and checkable card components
  • ProList - Advanced list component with toolbar
  • ProDescriptions - Enhanced descriptions component
  • ProField - Unified field rendering component
  • ProSkeleton - Loading skeleton components
  • ProProvider - Global configuration provider
  • Utilities - Helper functions and hooks
ProComponents uses a monorepo structure, but you only need to install one package. All components are exported from @ant-design/pro-components.

​
TypeScript Support

ProComponents is written in TypeScript and includes comprehensive type definitions out of the box. No additional @types packages are needed. 
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';

interface DataType {
  id: number;
  name: string;
  age: number;
}

const columns: ProColumns<DataType>[] = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age', valueType: 'digit' },
];

​
Import Styles

ProComponents automatically inherits Ant Design’s styles. Make sure you import Ant Design’s CSS in your application: 
import 'antd/dist/reset.css'; // For Ant Design 5.x+
If you’re using Ant Design 4.x, import antd/dist/antd.css instead. However, ProComponents 3.x officially requires Ant Design 6.x.

​
Module Formats

ProComponents supports multiple module formats for different build tools:

​
Bundle Size Optimization

ProComponents supports tree-shaking when using ES modules with modern build tools: 
// This only bundles ProTable and its dependencies
import { ProTable } from '@ant-design/pro-components';
For even better optimization, you can use import aliases if your project supports them: 
// Import specific components (works with some build configurations)
import ProTable from '@ant-design/pro-components/es/table';
import ProForm from '@ant-design/pro-components/es/form';
Most modern bundlers (Vite, Webpack 5+) automatically tree-shake unused code when you import from the main package entry point.

​
Verification

Verify your installation by creating a simple component: 
import { ProCard } from '@ant-design/pro-components';

export default function App() {
  return (
    <ProCard title="Hello ProComponents">
      <p>If you can see this, ProComponents is installed correctly!</p>
    </ProCard>
  );
}

​
Configuration Files

Depending on your build tool, you may need additional configuration:
vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: [
      '@ant-design/pro-components',
      'antd',
    ],
  },
});

​
Troubleshooting

Make sure you’ve installed the package correctly:
npm list @ant-design/pro-components
If it’s not listed, reinstall:
npm install @ant-design/pro-components --force
ProComponents requires React 18+. Check your React version:
npm list react react-dom
If needed, upgrade:
npm install react@latest react-dom@latest
ProComponents requires Ant Design 6.x. Install the correct version:
npm install antd@^6.0.0
Make sure you’ve imported Ant Design’s CSS:
import 'antd/dist/reset.css';
Place this import at the top of your main entry file (e.g., main.tsx or App.tsx).
If you encounter TypeScript errors, ensure your tsconfig.json includes:
{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "jsx": "react-jsx"
  }
}

​
Next Steps

Quick Start

Build your first ProComponents application

Components Overview

Explore all available components

Build docs developers (and LLMs) love

Get started for freeTalk to us