What’s New in Ant Design 5.0 Alpha? Key Features, Theme System, and Upcoming Plans

Ant Design’s team announces the release of Ant Design 5.0 Alpha, highlighting major new features, important updates, and upcoming plans.

New Features

New Design

Version 5.0 adopts a fresh design philosophy centered on three principles—focus, reduced distraction, and a light feeling—re‑imagining the visual language of Ant Design to make virtual office work more enjoyable.

Optimizations include:

Gradient rounded corners with larger base radii for a more relaxed style.

Reduced line usage to increase spatial efficiency and simplify the experience.

Faster interaction animations for smoother feedback.

Unified focus styles that appear only on keyboard focus, improving accessibility.

New Dynamic Theme Scheme

Moving away from the Less‑based theming of 4.x, Ant Design 5.0 embraces CSS‑in‑JS, which solves dynamic theme switching and theme mixing at runtime while offering a smaller bundle size and on‑demand style loading without extra plugins.

Design Tokens become the core of the theming system; every component consumes tokens to generate its styles. Tokens are cached, so identical token‑component combinations reuse the same generated CSS, avoiding redundant calculations and performance loss.

The new theming capabilities allow:

Global theme customization.

Local (nested or parallel) theme scopes.

Component‑level theme overrides.

Direct use of themed Sketch designs.

New Components

Version 5.0 adds several new components:

Tour – a guided walkthrough component.

QrCode – QR code generation.

WaterMark – watermark overlay.

FloatButton – a floating action button (already available for trial).

Other Important Updates

Browser compatibility: IE support is dropped, enabling the use of newer W3C features.

Popup Component API Unification

Previously, popup‑related components used either open (e.g., Select) or visible (e.g., Tooltip). In 5.0, visible is deprecated in favor of open, aligning with the native HTML dialog element. The deprecated API will emit warnings and be removed in the next major release.

Similarly, the className prop split into popupClassName and dropdownClassName is unified under popupClassName.

Deprecation of JSX Sugar

JSX shortcuts like Menu.Item are removed to reduce maintenance cost and improve performance. Developers should now use the items prop to pass data‑driven configurations.

Deprecation of Static Methods

Static methods such as message.error are discouraged after React 18 because they may not align with the component lifecycle. Hooks are now the recommended way to use these components, and developers are encouraged to wrap them in custom hooks for better integration.

Upcoming Plans

Before the stable release, the team plans to deliver:

A codemod tool for migrating from V4 to V5.

A more comprehensive theme editor.

A revamped website with features like copying component code to Sketch.

Additional new components.

Stay tuned for the full Ant Design 5.0 experience!

Final Note

The Ant Design 5.0 Alpha reflects eight months of development with contributions from the community. The team thanks everyone for their support and invites users to try the alpha, report issues, and continue co‑building Ant Design.