Ant Design Pro v6.0.0: Full‑Stack Upgrade, AI Assistant, and 42% Faster Builds

Five years after v5, Ant Design Pro v6.0.0 embraces React 19, antd 6, Turbopack‑based utoopack, Tailwind and CSS‑in‑JS, adds an AI assistant built on Ant Design X, moves demo APIs to Cloudflare Workers, and delivers roughly a 42% reduction in production build time.

Alipay Experience Technology
Alipay Experience Technology
Alipay Experience Technology
Ant Design Pro v6.0.0: Full‑Stack Upgrade, AI Assistant, and 42% Faster Builds

Almost five years after Ant Design Pro v5, the front‑end ecosystem has shifted: React 18/19 introduced concurrent rendering, antd moved from v4 to v6, build tools evolved from webpack to Turbopack, and CSS‑in‑JS and Tailwind became mainstream. Ant Design Pro v6 adopts the latest stack and removes legacy baggage.

Core Platform Updates

Ant Design V6 – enterprise design system used throughout Pro v6, now in CSS‑variable mode (cssVar) with Default, Dark and Glass theme presets, delivering noticeable rendering performance gains.

Ant Design X – AI‑focused UI solution that merges GUI with natural‑language interaction. Pro v6 ships an out‑of‑box AI assistant page built on this framework.

Ant Design CLI – official command‑line tool ( npx antd) that queries component APIs, provides example code and diagnoses project configuration, now integrated directly into Pro v6.

utoopack – a Rust‑based Turbopack engine offering ultra‑fast cold starts and millisecond‑level HMR. Production builds are about 42% faster compared with the previous webpack‑based approach.

Framework Upgrade

Pro v6 is built on React 19 and antd 6 . React 19’s concurrent features and Server Components, together with antd 6’s updated design system and CSS‑variable theming, are available out of the box.

The project now uses Umi Max 4 . Import statements have been updated, for example:

- import { useModel } from 'umi';
+ import { useModel, request, useAccess, getLocale, useIntl } from '@umijs/max';

All former @ant-design/pro-table, @ant-design/pro-form, @ant-design/pro-layout packages are consolidated into @ant-design/pro-components v3, simplifying version alignment.

Style System Refactor

v5 relied on Less, whose activity has declined. v6 migrates to modern CSS approaches:

Tailwind CSS v4 – atomic utility classes eliminate custom layout and spacing code.

antd‑style v4 – a CSS‑in‑JS solution that consumes Ant Design design tokens, enabling zero‑cost theme switching.

CSS Modules – component‑scoped style isolation to avoid naming conflicts.

Enabling antd’s CSS‑variable mode further improves dynamic theme switching and rendering performance.

Build Performance

v5 used mfsu (webpack 5) for dependency pre‑compilation; v6 switches to utoopack (Turbopack) . In a test environment (Apple M‑series, Node 22) production build time dropped from ~15.5 seconds to ~9.0 seconds, a 42% speedup. The new routePrefetch feature also makes page transitions smoother.

Test environment: Apple M‑series, Node 22

AI Capability

v6 introduces an AI assistant page built with Ant Design X, providing a ready‑to‑use chat interface that demonstrates how to embed AI dialogue within a Pro project.

Toolchain Modernization

Biome replaces ESLint + Prettier, offering linting and formatting up to ten times faster.

React Query replaces useRequest, delivering built‑in caching, request deduplication, optimistic updates and infinite scrolling.

Library upgrades: yorkie → husky, moment → dayjs, lodash → native API / clsx, class components → functional components.

Docker configuration removed; the project can be started with git clone + npm run simple.

Cloudflare Workers Backend

The demo API is migrated to Cloudflare Workers using the Hono framework. The cloudflare-worker/ directory contains its own package.json and tsconfig.json, allowing independent deployment.

D3 Map Visualization

A zero‑configuration D3 map component is included and works out of the box.

Cheatsheet Documentation

v6 replaces the external pro.ant.design site with an in‑repo Cheatsheet written in Markdown ( docs/cheatsheet.zh-CN.md and docs/cheatsheet.en-US.md). The pages are rendered via @ant-design/x-markdown on the Welcome screen, supporting syntax highlighting and dark mode.

Upgrade Guide

Because v6 is a major version bump, the recommended migration path is to create a new v6 project and gradually port business code. Key steps include:

Dependency replacement: umi → @umijs/max, consolidate ProComponents to @ant-design/pro-components.

Style migration: Less → Tailwind + antd-style + CSS Modules.

Import path updates: from 'umi' → from '@umijs/max'.

Request library change: useRequest → @tanstack/react-query.

Code linting: ESLint + Prettier → Biome.

Date library: moment → dayjs.

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git myapp
cd myapp
npm install
npm run simple  # minimal template

Acknowledgements

Thanks to over 100 contributors, especially @chenshuai2144 for early v6‑beta work. The full changelog is available at https://github.com/ant-design/ant-design-pro/issues/11734.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

AI AssistantCSS VariablesAnt DesignTurbopackBuild PerformanceReact 19Umi Max
Alipay Experience Technology
Written by

Alipay Experience Technology

Exploring ultimate user experience and best engineering practices

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.