# Ant Design Pro — Enterprise React Admin Dashboard Scaffold

> Production-ready admin dashboard scaffold built on Ant Design, UmiJS, and React. Provides layout templates, permission routing, data flow patterns, and internationalization out of the box for building internal tools and back-office apps.

## Install

Save as a script file and run:

# Ant Design Pro — Enterprise React Admin Dashboard Scaffold

## Quick Use
```bash
npm i @ant-design/pro-cli -g
pro create my-admin
cd my-admin && npm install && npm start
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-82e3ba96
Author: Script Depot