DEV Community

zombieJ
zombieJ

Posted on

Ant Design 6.0 is released!

#react #ui #frontend

Introduction

Since its open-sourcing, Ant Design has garnered 96.6K Stars, accumulated 31.9K issues, 20.7K PRs, released 904 npm versions, and has had 2314 contributors participate in its development. These numbers not only represent the community's activity and support but also witness the project's continuous evolution and maturation.

It is because of you that Ant Design can continue to grow and move towards its next stop: 《Plan about Ant Design 6.0》

Ant Design 6.0

After extensive RFC discussions and multiple Alpha version iterations, v6 has now entered a stable phase. Today, we are announcing the official release of Ant Design v6!

This upgrade focuses on deep technical optimizations, aiming to provide better compatibility and performance for React 19 and future versions (with version compatibility raised to React 18), and to further improve the semantic structure of components and CSS variable support.

Unlike v5, this upgrade is a smooth version migration:

  • If your project is already running on v5, you can upgrade directly to v6 without needing a compatibility package or codemod tool.
  • The v5 main branch will switch to v5.x-stable and enter a 1-year maintenance period.
    • We will no longer provide functional updates to v5 unless there is a particularly serious bug.

Technical Upgrades and Core Changes

⚛ Minimum React Version Requirement Raised to 18

v6 supports versions from React 18 onwards, removing compatibility logic for React versions prior to this, thus avoiding API behavior differences between different versions.
We still recommend using the latest React 19 version for the best experience.

For static methods like Modal.confirm, you no longer need extra compatibility code or dependencies, and can directly remove the relevant compatibility code:

-- import '@ant-design/v5-patch-for-react-19';
Enter fullscreen mode Exit fullscreen mode

📦 React Compiler Enabled in dist

Enabled React Compiler in the bundled outputs antd.js and antd.min.js to improve performance. Users in CJS/ESM environments can choose to enable it as needed. For more details, refer to the React documentation.

🌈 Pure CSS Variables Style Architecture

With the complete removal of IE support, @ant-design/cssinjs in v6 defaults to the pure CSS Variables mode:

  • Lighter style switching, supporting real-time theme changes.
  • Reduced bundle size through multi-theme reuse.
  • Supports zero-runtime style generation, which can be used with @ant-design/static-style-extract: 
<ConfigProvider theme={{ zeroRuntime: true }}>
  <App />
</ConfigProvider>
Enter fullscreen mode Exit fullscreen mode

The performance comparison is as follows, with zeroRuntime mode performing the best(compared with theme count):

Size

Speed

You can get the full variable name through useToken:

const App = () => {
  const {
    cssVar: { colorBgElevated },
  } = theme.useToken();
};
Enter fullscreen mode Exit fullscreen mode

🚫 IE Support Discontinued

The CSS Variables mode completely removes the StyleProvider for IE compatibility.

🧩 Semantic Structure for All Components

v6 has completed the DOM semantic transformation for all components:

Semantic Structure

  • #52115

Semantic Render Props

  • 54995

  • APIs use logical position descriptions (e.g., start / end) and support RTL.

  • The internal structure can be uniformly configured using ConfigProvider's classNames and styles.

    • Supports functional dynamic generation of semantic structure: 
const btnClassNames: ButtonProps['classNames'] = ({ props }) => {
  switch (props.type) {
    case 'primary':
      return { ... };
    default:
      return { ... };
  }
};

<ConfigProvider button={{ classNames: btnClassNames }}>
  <App />
</ConfigProvider>
Enter fullscreen mode Exit fullscreen mode

Playful Icon Button 

<Button
  classNames={{
    root: 'rounded-tr-xl rounded-bl-xl',
    icon: 'rotate-30',
  }}
  icon={<SmileOutlined />}
>
  Ant Design
</Button>
Enter fullscreen mode Exit fullscreen mode

Funny

Geek-style Card 

<Card
  title="Hello World"
  classNames={{
    root: "bg-green-300/10 text-green-500 border-green-500 rounded-none [box-shadow:0_0_8px_theme(colors.green.500)]",
    header: "rounded-none border-green-500 [box-shadow:inset_0_0_8px_theme(colors.green.500)]",
    title:
      "text-green-500 [text-shadow:0_0_12px_theme(colors.green.400)] overflow-visible",
      body: "rounded-none [text-shadow:0_0_8px_theme(colors.green.400)] [box-shadow:inset_0_0_12px_theme(colors.green.500)]"
  }}
>
  Ant Design loves you!~ (=^・ω・^)
</Card>
Enter fullscreen mode Exit fullscreen mode

Geek Green

🚫 Removed v4 Deprecated APIs

v6 removes all APIs that were deprecated in v4 and kept for compatibility in v5:

  • findDOMNode compatibility logic is removed.
  • Documentation for List, Dropdown.Button, BackTop is removed, but compatibility is retained.
  • React 18 compatibility code is deleted (directly supports 18).
  • Unified API naming style, compatible with all v5 APIs.

New Components and Enhancements

🔥 Masonry Component

For scenarios like image galleries, card streams, etc.:

Masonry

🔥 Tooltip Supports Panning and Sliding

Enable panning and sliding between multiple tooltip contents:

🆕 InputNumber spinner Mode

A common button layout style, making it easy for users to click and interact directly:

Spinner InputNumber

🆕 Drawer Supports Resizing

Resizable Drawer

🎨 Mask Blur Background

All overlay layers use a blur effect by default, which can be turned off via mask: { blur: false }:

Blur Mask

Upgrade Guide

  • v6 is fully compatible with v5 and can be upgraded directly.
    • It is recommended to replace deprecated APIs according to the warnings.
  • The project needs to run on React 18 or a higher version.
  • IE is no longer supported.

Future Plans

  • Optimize mobile interaction experience.
  • Enhance Accessibility support.
  • Follow up on new React features to improve performance.
  • More new components are in development, please stay tuned.

One More Thing

Ant Design X 2.0

🚀 Ant Design X is simultaneously releasing version 2.0. As Ant Design's component library for AI scenarios, the new version brings more powerful interaction and rendering capabilities. If you are exploring AI-driven interface experiences, now is the best time: 🎉 Ant Design X 2.0 is here! 🎉

LUI

A Final Word

Ant Design has gone through 10 years since its first line of code. We hope that in the wave of AI, Ant Design will remain your best partner. Thanks to all the friends who contributed to v6. — Because of your participation, open source is so wonderful:

984507092
afc163
aojunhao123
Arktomson
cactuser-Lu
ccc1018
codewizardTM
coding-ice
crazyair
divyeshagrawal
elrrrrrrr
EmilyyyLiu
fireairforce
GinWU05
guoyunhe
hcjlxl
JeeekXY
Jerryqun
jin19980928
jon-cullison
kiner-tang
li-jia-nan
Linkodt
lovelts
MadCcc
meet-student
nmsn
OysterD3
Psiphonc
Susuperli
tanjiahao24
thinkasany
ug-hero
wanpan11
Wxh16144
xkhanhan
yellowryan
yoyo837
zjr222
zombieJ
Zyf665

Top comments (0)