Ant Design Pro — Enterprise-Class React Admin Framework by Ant Group

Introduction

Ant Design Pro is a production-ready React admin framework built on UmiJS and the Ant Design component library. Developed by Ant Group, it provides enterprise-level patterns for permissions, layouts, data flow, and internationalization that power hundreds of internal Alibaba systems.

What Ant Design Pro Does

• Scaffolds complete admin applications with best-practice project structure
• Provides ProComponents (ProTable, ProForm, ProLayout) for rapid CRUD development
• Implements route-level and component-level access control via policies
• Integrates OpenAPI schema generation for automatic API client code
• Offers built-in mock data and testing infrastructure

Architecture Overview

Ant Design Pro sits on top of UmiJS, a pluggable React application framework. Data flow uses a lightweight model layer (dva or hooks-based). ProLayout handles the shell (sidebar, header, breadcrumbs) while ProComponents abstract common patterns like searchable tables and multi-step forms into config-driven components.

Self-Hosting & Configuration

• Use the official CLI or Umi plugin to scaffold a new project
• Define routes and access policies in config/routes.ts
• Configure proxy rules in config/proxy.ts for dev-time API forwarding
• Set environment variables for API endpoints in .env files
• Deploy the production build as static files or serve via Node.js with SSR

Key Features

• ProComponents reduce boilerplate for tables, forms, and descriptions
• Block system lets you insert pre-built page templates into your project
• Built-in internationalization with automatic locale detection
• TypeScript-first with full type coverage across all layers
• Integrated testing setup with Jest and React Testing Library

Comparison with Similar Tools

• vue-element-admin — Vue 2 equivalent, larger star count but older tech stack
• react-admin — Framework-agnostic data layer, less opinionated UI
• Refine — Headless approach, supports multiple UI libs beyond Ant Design
• Next.js Admin Templates — More flexible routing but less admin-specific tooling
• AdminJS — Node.js auto-generated admin, less customizable frontend

FAQ

Q: Do I need to use UmiJS? A: Ant Design Pro is tightly coupled to UmiJS for routing and plugins. Using it standalone requires significant rewiring.

Q: Is it compatible with Next.js? A: ProComponents can be used in any React project, but the full Pro framework (layouts, permissions) assumes UmiJS.

Q: How are permissions handled? A: Routes define access properties, and a central access factory function determines what the current user can see or do.

Q: Can I upgrade from v4 to v5? A: Yes, with breaking changes around the data flow layer (dva to hooks) and layout APIs. Migration guides are provided.

Sources

• https://github.com/ant-design/ant-design-pro
• https://pro.ant.design/