What’s New in Ant Design 6.0? A Deep Dive into the Latest Frontend Upgrade

Release Overview

Ant Design 6.0 and Ant Design X 2.0 were officially released. The new major version upgrades the UI library with a focus on deep technical optimizations, React 18+ compatibility, and a pure CSS‑Variables styling architecture.

Migration Path from v5

Projects running on v5 can upgrade directly to v6 without compatibility packages or codemod tools.

The v5 main branch is renamed to v5.x-stable and will receive a one‑year maintenance window (critical bug fixes only after that period).

Key Technical Upgrades

React Compatibility

Ant Design v6 requires React 18 or newer; React 19 is recommended for the best experience. Legacy compatibility code for earlier React versions has been removed. Static methods such as Modal.confirm no longer need extra patches.

-- import '@ant-design/v5-patch-for-react-19';

React Compiler in Distribution

The distributed bundles antd.js and antd.min.js now enable the React Compiler. Projects can toggle the compiler for CommonJS or ESM builds as needed.

Pure CSS‑Variables Architecture

With IE support dropped, Ant Design defaults to a pure CSS‑Variables mode via @ant-design/cssinjs. Benefits include lighter theme switching, real‑time theming, reduced bundle size through multi‑theme reuse, and zero‑runtime style generation (compatible with @ant-design/static-style-extract).

<ConfigProvider theme={{ zeroRuntime: true }}>
  <App />
</ConfigProvider>

Full CSS variable names can be accessed through useToken:

const App = () => {
  const { cssVar: { colorBgElevated } } = theme.useToken();
};

Component Semantic Overhaul

All components have been refactored for proper DOM semantics, supporting logical API placement (e.g., start / end) and RTL. Global configuration of class names and styles is possible via ConfigProvider.

const btnClassNames: ButtonProps['classNames'] = ({ props }) => {
  switch (props.type) {
    case 'primary':
      return { /* ... */ };
    default:
      return { /* ... */ };
  }
};

<ConfigProvider button={{ classNames: btnClassNames }}>
  <App />
</ConfigProvider>

Deprecated APIs Removed

findDOMNode

compatibility logic eliminated.

Documentation for List , Dropdown.Button , and BackTop removed, but compatibility shims remain.

All React 18 compatibility code deleted; the library now directly supports React 18.

API naming unified while preserving v5 compatibility.

New Components & Enhancements

Masonry Layout

A new Masonry component for image galleries and card flows.

Tooltip with Pan‑Slide

Tooltips now support pan‑slide interaction across multiple content areas.

InputNumber Spinner Mode

A spinner mode provides a compact button layout for quick value adjustments.

Draggable Drawer

The Drawer component now supports drag‑to‑resize interactions.

Blurred Mask Background

All overlay components use a blurred background by default; it can be disabled with mask: { blur: false }.

Upgrade Guide

v6 is fully compatible with v5; upgrade directly.

Replace deprecated APIs as indicated by compiler warnings.

Projects must run on React 18 or higher.

IE is no longer supported.

Future Plans

Optimize mobile interaction experience.

Enhance accessibility support.

Track new React features to improve performance.

Develop additional new components.

Ant Design X 2.0

Ant Design X 2.0 is the AI‑focused extension of Ant Design, adding stronger interaction and rendering capabilities for AI‑driven interfaces.

References

Plan about Ant Design 6.0: https://github.com/ant-design/ant-design/discussions/51919

Ant Design X 2.0 announcement: https://github.com/ant-design/x/issues/1358