DEV Community: zombieJ

Ant Design 6.0 is released!

zombieJ — Mon, 24 Nov 2025 07:53:26 +0000

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》

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';

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

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

You can get the full variable name through useToken:

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

🚫 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:

#52115

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>

Playful Icon Button

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

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>

🚫 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.:

🔥 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:

🆕 Drawer Supports Resizing

🎨 Mask Blur Background

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

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 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! 🎉

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

Ant Design 4.0 is in progress!

zombieJ — Fri, 31 May 2019 03:40:20 +0000

Recap

It has been 16 months since December 2017 when Ant Design 3.0 was released. We fixed plenty of bugs and added lots of new features(changelog) within 4289 commits, 138 releases, 7675 issues & PRs, that brought us 25375 stars in GitHub. We also released Ant Design Pro 4.0. Support for TypeScript, blocks, and abstraction of layouts. We want to thank every contributors and your contribution makes Ant Design better and better.

At the same time, we released Ant Design Pro 4.0. Support TypeScript, Block and Provides Layout component.

At this moment, we are thinking: Ok then, what's next? What can we do to make Ant Design going further?** It is the time to plan for the Ant Design 4.0**! 🍻

Following is the detail plan about 4.0. We may adjust some of them since it's still in planning.

🌓 About Compatibility

We will remove deprecated props in 4.0, which means deprecated props will be no longer supported. If you're not getting any warning from latest 3.x, it will be seamless to upgrade. Otherwise, there will be hal year maintenace phase for 3.0 after 4.0 is released.

We know it's troublesome to do upgrades. We're planning to provide compatible package to handle this:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

This package will be available till the end of 3.x maintenance phase.

Use latest React API

We have provided React 15 support for a long time. But it seems not necessary from social feedback (There are nearly 0% of issues about React 15), since React has strong compatiblity. To support React 15, we use new API very carefully. This will be not a problem after 4.0 anymore:

Provides Hooks api for related component
Support Concurrent mode (Still preparing, will continue adjust in 4.0)
Embrace React 17(wow！~)

Stop IE9/10 support

Ant Design 3.0 spends lots of effort to support old IE. But according to the industry statistics, usage of IE9/10 get lower and lower with Windows upgrade. We will stop support IE 9/10 in 4.0 (but still support IE 11), which means newer browser feature support will be possible.

Other compatible update

Less 2.x upgrade to Less 3.x
Icon adjustion
Mention deprecated

📦 Reduce size

Optimize icon size

We use svg icon (why svg?) after antd@3.9.0 . We use string name to map the icon, which can not load on demand. We import all the icon file into antd which makes bundle size large. We will handle this in 4.0.

Old Icon usage way will be** deprecated**:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Will use import single Icon instead in 4.0 :

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

You can still use compatible way in old way.

Remove Draft.js

We use Draft.js in Mention component to confirm popup location, but only a small part functionality of it is used. It seems over cost. We plan to remove Draft.js in 4.0, and use other light solution instead. At the same time, to distinguish with origin Mention component in 3.0, a new component Mentions will be introduced to avoid api conflict. Also, it supports compatible way:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Performance optimization

We get few performance issue for large data set from community. We'll make sure some optimization will be done here.

Virtual scrolling

Virtual scrolling is a common way to do performance optimization. We're planning to support this natively in components. It may not finish immediately in 4.0 release. Will integrate step by step.

Refactor Animation

We did some hack with animation in the past. It works well in most case. We plan to use much pure React way instead of hack one. This update will be in silence, nothing will affect you.

🧩 Components Optimization

We've add many components in 3.0, and will continue in 4.0. These components will come from business scenario, Ant Design Pro and social requirement. New components process will be same as Ant Design 3.0, we will put related design file in PR and collect it in the official website. Release in each minor version.

Besides, we plan to refactor some key components to make easier to use. Includes but not only:

Form

Form is one of the most usage component. We notice that social have many comments on the API design.
We wish to simplify the API in 4.0:

Form will include data store. No need to use Form.create() anymore.
Fom.Item will include field bind. No need to use getFieldDecorator anymore.
Form.Item will keep the value, but the validator will be disabled when field removed.

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

In the real world, we meets lots of communication between forms (usually in detail configuration). We want to make it easier:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

If you want to follow Form progress, you can see here.

Table

In the past, we received lots of Table feedback. We know that expand and scroll props not works well together. This time, we will focus to fix it. Besides, we will do much on the Table optimization. And easy way to do the layout：

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

We also plan to add Summary Footer to support summary row.

New DatePicker

Current DatePicker statifies most requirement. But from community discussion, we can dig it more. We will provide rest year picker and ranger picker (discuss). And also, we will update the DatePicker design style to enhance user experience.

🚀 Continue updating

Besides content above, we also plan to do some continue updating. These will keep updating in 4.0 to enhance development and user experience.

🧶 Improve accessibility

Ant Design 3.0 has limited support for accessibility, we plan to adjust the dom structure and add more aria mark to enhance the screen reader experience. Besides, we also prepare to optimize key board interaction.

🎯 Developer API standard

We find some API naming style is little different with others. It's not a problem for Typescript developer, but it's hard to remember otherwise.
Thus, we will create a naming standard document which includes current APIs and related naming rules. In new feature, will follow the naming rule to avoid API naming conflict. Also, we welcome community opinions about this in PR.

💼 React Strict Mode

If you tried wrap antd component with <React.StrictMode> , you will get warning. We've already replace some components with new life cycle method. This work will continue in 4.0.

💡 Improve developer experience

In the past, we found that some issue comes repeatedly. These issues somehow are usage question. We think we can do something on this (actually already start in 3.0). In development environment, we will warning unexpected status (like invalidate Moment object, prefix/affix adjustment cause dom structure change, etc.). We believe that console is the first place to focus when meet problem. Provides proper tips can help to find the problem. At same time, we will summary other questions into FAQ of each Component document. From the side of maintenance, we can't help on each usage question, but they do exist, particularly with new come developers. FAQ may help to save lots of searching time. If you have interest on this, welcome to help enhancing developer experience with us.

🐱 Design Resource

Ant Design is not only a component library. Design is the support power. We will sync update the design resource (Sketch component package, Kitchen tools, Design Token, etc.). We will also adjust current component style to enhance user experience.

Milestones

Here is our milestones plan. We will create related issue on Github. And also welcome social contributor:

Q2

Mark related API as Deprecated and remove from document.
Low level component warn update.

Q3

Create antd 4.0 branch and update the document.
Components development.

Q4

Release Ant Design 4.0.

Welcome aboard

We will keep you posted during the developing process. Content above may not be final. Thought/advice from community will be more than welcome! Let's make Ant Design 4.0 better!