Ant Design Pro — Enterprise React Admin Dashboard Scaffold

Introduction

Ant Design Pro is an out-of-the-box admin scaffold built on top of Ant Design and UmiJS. It solves the boilerplate problem for enterprise back-office applications by providing production-ready layouts, routing, state management, and mock data so teams can focus on business logic instead of infrastructure.

What Ant Design Pro Does

• Generates a full admin dashboard project with sidebar, header, and breadcrumb layouts
• Integrates role-based access control and permission-aware route guards
• Ships with a built-in mock server for rapid prototyping without a backend
• Supports internationalization (i18n) with locale switching
• Provides reusable page templates for tables, forms, profiles, and result pages

Architecture Overview

Ant Design Pro sits on UmiJS as its framework layer, which handles routing, plugins, and build tooling via Webpack. State management uses a dva-based model convention that co-locates effects, reducers, and subscriptions per feature. The layout system is extracted into @ant-design/pro-layout, making it usable independently. ProComponents such as ProTable and ProForm add higher-level abstractions on top of base Ant Design components, reducing repetitive CRUD code.

Self-Hosting & Configuration

• Run npm run build to generate a static bundle deployable to any CDN or web server
• Configure proxy rules in config/proxy.ts to route API calls during development
• Set layout and access options in config/config.ts for route-level permissions
• Override theme variables via config/defaultSettings.ts for branding
• Add locale files under src/locales/ and switch languages at runtime

Key Features

• ProTable and ProForm components that auto-generate columns and fields from schema
• Built-in OpenAPI code generator that creates service and typing files from Swagger specs
• Umi plugin ecosystem for analytics, Sentry, Docker, and more
• Comprehensive TypeScript typings across the entire scaffold
• Official Ant Design 5.x integration with CSS-in-JS theming

Comparison with Similar Tools

• React Admin — uses a data-provider abstraction for any backend; Ant Design Pro is more opinionated and tightly coupled to Ant Design components
• Refine — framework-agnostic headless approach; Ant Design Pro offers a more batteries-included admin experience
• AdminJS — Node.js backend-driven admin panel; Ant Design Pro is a frontend scaffold you pair with any API
• Next.js + shadcn/ui — flexible but requires assembling layout, auth, and CRUD yourself; Ant Design Pro provides all of this pre-wired

FAQ

Q: Can I use Ant Design Pro with Next.js instead of UmiJS? A: The scaffold is built around UmiJS conventions. You can use ProComponents independently in a Next.js project, but the full scaffold experience requires Umi.

Q: Is Ant Design Pro free for commercial use? A: Yes, it is released under the MIT license.

Q: How do I add a new page with permissions? A: Define the route in config/routes.ts with an access field, then add the corresponding access rule in src/access.ts.

Q: Does it support dark mode? A: Yes, toggle via navTheme in defaultSettings.ts or at runtime through the settings drawer.

Sources

• https://github.com/ant-design/ant-design-pro
• https://pro.ant.design/docs/getting-started