Skip to main content
ProComponents Logo

ProComponents

Designed for Enterprise-Level Application, Use Ant Design like a Pro! ProComponents is a comprehensive UI component library built on top of Ant Design, specifically designed for enterprise applications. It provides advanced, production-ready components that handle complex business scenarios out of the box.

Overview

ProComponents extends Ant Design with powerful components like ProTable, ProForm, and ProLayout that significantly reduce the amount of boilerplate code needed for common enterprise UI patterns. Instead of writing hundreds of lines of configuration, you can achieve the same result with a clean, declarative API.

ProTable

Advanced data tables with built-in search, filtering, sorting, and CRUD operations

ProForm

Enterprise-ready forms with validation, layouts, and 20+ specialized field types

ProLayout

Complete admin layout solution with navigation, breadcrumbs, and responsive design

ProCard

Enhanced cards with statistics, checkable cards, and complex layouts

Key Features

ProComponents stands as a beacon for React-based enterprise application development. Here’s what makes it exceptional:
ProComponents boasts a comprehensive array of UI elements—ranging from tables and forms to charts and tree views. It caters to the diverse needs of enterprise applications with finesse.
  • ProTable: Advanced data tables with search, filter, and pagination
  • ProForm: Multiple form layouts (Modal, Drawer, Steps, Query)
  • ProLayout: Complete page layout with routing integration
  • ProCard: Statistics cards, checkable cards, and dividers
  • ProList: Advanced lists with toolbar and batch operations
  • ProDescriptions: Display read-only structured data
  • ProField: Unified field rendering for different value types
Beyond basic UI elements, ProComponents is equipped with sophisticated data handling and business logic capabilities:
  • Built-in request handling with loading states
  • Automatic form-table synchronization
  • Column state persistence with localStorage
  • Advanced value types (date ranges, money, progress, etc.)
  • Editable tables with inline validation
  • Drag-and-drop sorting support
With its straightforward API and detailed documentation, ProComponents ensures a smooth onboarding experience:
  • TypeScript-first with full type definitions
  • Intuitive props API matching Ant Design patterns
  • Extensive demo examples for every component
  • Hot module replacement in development
  • Comprehensive error handling and boundaries
Built specifically for production enterprise applications:
  • Internationalization (i18n) support out of the box
  • Theming system compatible with Ant Design tokens
  • Tree-shaking for optimal bundle size
  • SSR (Server-Side Rendering) compatible
  • Accessibility (a11y) standards compliant
  • Production-tested at scale by Ant Financial
The library accommodates a plethora of configurations and styling options:
  • Custom render functions for tables and forms
  • Pluggable value type system
  • Override any component with your own implementation
  • CSS-in-JS with @emotion for dynamic styling
  • Support for custom themes and design tokens

What Makes ProComponents Different?

While Ant Design provides basic building blocks, ProComponents takes it further by understanding common enterprise patterns:
// Typical CRUD table with Ant Design requires ~200 lines
import { Table, Form, Input, Button, Modal } from 'antd';

function UserTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  
  // Fetch data, handle pagination, sorting...
  // Handle create/edit/delete operations...
  // Manage form state and validation...
  // Handle search and filters...
  
  return (
    <>
      <Form>{/* Search form fields */}</Form>
      <Table 
        loading={loading}
        dataSource={data}
        // ... 50+ lines of column config
      />
      <Modal>{/* Edit form */}</Modal>
    </>
  );
}
ProComponents handles the heavy lifting of state management, data fetching, form synchronization, and UI patterns so you can focus on your business logic.

Browser Compatibility

ProComponents supports all modern browsers:
  • Edge (last 2 versions)
  • Firefox (last 2 versions)
  • Chrome (last 2 versions)
  • Safari (last 2 versions)
  • Opera (last 2 versions)
  • Electron (last 2 versions)
Internet Explorer support was dropped in ProComponents 3.0. For legacy browser support, use ProComponents 2.x.

Package Information

  • Package: @ant-design/pro-components
  • Version: 3.1.10+
  • License: MIT
  • Bundle: Supports ESM and CommonJS
  • TypeScript: Full type definitions included
  • Dependencies: Requires React 18+, Ant Design 6+

Who Uses ProComponents?

ProComponents is production-tested and used by:
  • Ant Financial (Alipay) internal systems
  • Thousands of enterprise applications worldwide
  • Open source projects in the Ant Design ecosystem
  • Startups to Fortune 500 companies

Next Steps

Installation

Get started by installing ProComponents in your project

Quick Start

Build your first ProTable or ProForm in minutes

Components

Explore all available components and their features

API Reference

Dive deep into component APIs and configurations

Build docs developers (and LLMs) love