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.
This guide explains why Ant Design dropdowns, tooltips, and popovers are often hidden or misaligned, how the default rendering to document.body causes these problems, and demonstrates practical use of the getPopupContainer property to control popup mounting and eliminate visual bugs in React applications.
Ant Design 6.0 and Ant Design X 2.0 were officially released at SEE Conf 2025, introducing smooth migration from v5, raising the minimum React version to 18, adopting pure CSS‑Variables, enabling React Compiler in the build, revamping component semantics, dropping IE support, and adding several new components such as Masonry, enhanced Tooltip, spinner‑style InputNumber, draggable Drawer, and blur‑mask overlays, with a clear upgrade guide and future roadmap.
Ant Design 6 drops IE support and adopts CSS variables, enabling smaller CSS bundles, easier theming, streamlined style overrides, conditional container queries, and scoped styling, while outlining practical code examples and compatibility considerations for modern browsers.
A front‑end engineer investigates a client’s complaint that arrow‑key scrolling fails on a page, discovers the issue stems from Ant Design’s Tabs component assigning tabindex=0 to TabPane elements, which hijacks focus, and outlines how proper tabindex usage restores expected keyboard navigation.
This article explores the inner workings of Ant Design Form, comparing the legacy HOC‑based implementation with the modern Hooks API, detailing state‑lifting, form store design, performance trade‑offs, and providing step‑by‑step code examples for building a custom form solution in React.
This article details the design, implementation, and practical usage of a Model Context Protocol (MCP) service for Ant Design components, explaining how to extract component documentation, define MCP tools and prompts, integrate with AI models like Claude, and improve frontend development efficiency.
This guide explains how to obtain a token, install MasterGo MCP in Cursor, configure the mcp.json file, and use the provided getDSL and getComponentLink tools to retrieve design canvas DSL and generate front‑end code such as React, Vue, or Flutter components.
WeaveFox, Ant Group’s AI‑powered front‑end platform, claims to turn design drafts into fully functional React or Vue code—including precise pixel alignment and interactive effects—in seconds, while offering cross‑terminal support, automated refactoring, performance boosts, and a continuous learning loop, yet the author argues it won’t fully replace developers.
This article explains the challenges of Right‑To‑Left (RTL) layout adaptation, compares three implementation strategies—including CSS logical properties, transform scaling, and manual RTL code—and demonstrates how tools like rtlcss, Tailwind, and Ant Design can automate or simplify RTL support for modern web projects.
This article explains the architecture and key features of ZhiZhu's customer service workbench, covering the overall system, the iframe‑based IM communication, multi‑tab third‑screen design, conversation caching with LRU, and full‑event tracking implementation using React, Umi and Ant Design.
This article walks through the iterative design of an Ant Design form component, starting with a simple name field, then adding a randomly generated code field, making it editable, and finally implementing a copyable code input with reusable prefix‑text and suffix‑icon components, while comparing implementation approaches.
This article walks through building a reusable OnBoarding (tour) component for React applications using Ant Design 5, explaining the underlying mask technique, step management, animation handling, resize observation, and providing complete source code and usage examples.
During a daily stand‑up, a team member struggled with a bug where a data‑selection modal using Ant Design's Table failed to display selected rows correctly due to large numeric IDs losing precision in JavaScript, and the issue was resolved by preventing automatic JSON parsing of 16‑digit strings.
This tutorial walks through creating a desktop screen‑recording tool using Electron with a React‑Vite front‑end, Ant Design UI, IPC communication, system‑tray controls, draggable windows, and FFmpeg for capturing video in WebM, MP4, or GIF formats.
This article examines the evolution of Ant Design's theming—from the less‑based Antd 4.x approach to the CSS‑in‑JS design‑token system in Antd 5.x—analyzes the performance trade‑offs of CSS‑in‑JS, and presents the official antd‑style solution for high‑performance, extensible, and compatible style overrides.
This article explains the concepts, use‑cases, and performance trade‑offs of controlled versus uncontrolled forms in React, demonstrates how Ant Design 3 and 4 implement form handling with HOC or Context + hooks, and introduces the lightweight, non‑controlled approach of react‑hook‑form with practical code examples.
This article explains how to create custom Ant Design select components that display additional information via integrated tables, covering form implementation, basic and advanced versions with infinite scrolling, handling Ant Design bugs, and documenting the components using Dumi, complete with code examples.
This weekly front‑end roundup from the Goodme team highlights five curated articles covering serverless cold‑start optimization, React component unit testing, CSS white‑space and word‑wrap mastery, debugging Ant Design source code, and a clear comparison of OSS, NAS, and EBS storage solutions.
This article explains how Ant Design's CSS‑in‑JS implementation uses server‑side rendering and a hash‑based cache to avoid runtime style generation, dramatically improving performance for both application‑level and component‑level styling.
This article reviews practical guidelines for building maintainable Ant Design forms in React, covering layout strategies, dynamic form techniques, component encapsulation, table and tab implementations, CSS styling conventions, architecture considerations, and custom hooks to improve code quality and developer productivity.
The article reviews Ant Design 5.0’s redesign, explaining how its focus on clearer visuals, reduced distractions, and a relaxed feel—through updated color palettes, larger interaction zones, and a flexible corner‑radius algorithm—enhances user efficiency and creates a more pleasant virtual office experience.
This article explains how Ant Design 5.0 introduces a visual theme editor, a comprehensive Design Token system, and a semantic model that together enable flexible, consistent, and efficient design customization across the entire product development workflow.
This article introduces Ant Design MetaGuide (ADM), a behavior‑oriented design‑system methodology that helps teams decide which components to build and how to evaluate their interaction quality using models like GOMS, illustrated with real Ant Design case studies.
Ant Design 5.0 introduces a component‑level CSS‑in‑JS approach that caches stable hashes per component, eliminating costly serialization on each render, improving performance compared to other libraries, while noting its limitations for general application development.
Ant Design V5’s CSS‑in‑JS architecture enables powerful dynamic theming, allowing developers and designers to implement global theme algorithms, partial theme overrides, component‑level styling, and seamless multi‑theme compositions, illustrated with real‑world applications, code snippets, and visual comparisons across light and dark modes.
This article explains why Ant Design 5 is preferred over MUI, then walks through configuring Vite and tsconfig, creating login and home pages, designing a recursive routing system, implementing lazy loading, menu generation, route listening hooks, tab management with KeepAlive, theme customization, and dynamic routing with React Router 6.4.3 for a full‑featured admin dashboard.
This article introduces a lightweight, configuration‑driven approach to building form fields in React using Ant Design, showing how to replace repetitive FormItem code with a declarative schema, handle edit/detail modes, render different component types, and apply common validation rules.
The article examines why Ant Design's Table feels sluggish, covering its historical design choices, memoization behavior, challenges with virtual scrolling and editable cells, and how breaking‑change management influences performance and developer experience.
This article examines why Ant Design’s Table component often feels sluggish, covering historical design choices, memoization pitfalls with external state, the challenges of virtual scrolling for editable tables, and how the shouldCellUpdate and onCell APIs provide finer‑grained rendering control.
Ant Design 4.20.0 introduces React 18 support, a new Segmented controller, enhanced Form capabilities, numerous component bug fixes, accessibility improvements, and visual refinements across Menu, Table, Tree, and other UI elements, providing developers with a more robust and modern frontend toolkit.
This article describes how a company refactored its Ant Design‑based React component library by standardizing on higher‑order component wrappers, adopting the dumi documentation tool, and organizing the codebase with a Lerna‑Yarn monorepo, resulting in significantly improved maintainability and developer efficiency.
This article demonstrates how to centralize route, menu, permission, and breadcrumb definitions in a React and Ant Design based admin application by using nested configuration objects, flattening utilities, and dynamic lookup functions to reduce duplication and simplify maintenance.
This article provides a comprehensive overview of rc-form, a React library used by Ant Design to manage form state, validation, and data collection, explaining why it is needed, its core APIs, practical usage examples, and a deep dive into its internal implementation.
This article examines the challenges of virtualizing large Ant Design tables in a React+Umi stack, outlines three internal implementation strategies, discusses common pitfalls such as blank flicker and column fixing, and recommends open‑source alternatives for efficient table rendering.
This article introduces Ant Design’s Invisible Design System, explaining how design asset management and engineering rules (ETCG) are explored to create unified, hidden guidelines that improve component consistency, workflow efficiency, and collaboration, and outlines the open‑source plan, Kitchen tool, and community initiatives for frontend development.
In this talk, Lin Wai, senior experience design expert at Ant Group, explains how Ant Design 4.0 is built on the fundamental assumption that every person seeks happy work, explores the challenges of mismatched skill‑challenge balance in the digital age, and introduces the ETCG 2.0 methodology that makes design more natural, certain, and growth‑oriented.
The talk explains Ant Design's core assumption that everyone seeks happy work, outlines its four design values, introduces the ETCG 2.0 methodology for consistent component design, and discusses how natural, deterministic interactions can make digital products feel more intuitive and enjoyable.
This article introduces the essential frontend technology stack—including React, Webpack, Ant Design, DVA, ES6, and Axios—explains the typical project directory layout, walks through source code organization, and provides practical steps and tips for building merchant‑side applications with a React‑DVA architecture.
NetEase Cloud Music’s frontend team created a JSON‑based form framework that extends Ant Design, offering async validation with error and warning states, reverse‑listener field linking, four exclusive form modes, flexible option loading, and performance‑optimized core‑render separation for complex B‑end applications.
This article shares Ant Design’s multi‑year open‑source project operation experience, covering project documentation, website setup, code style, unit testing, CI services, release workflow, issue/PR templates, Git tips and community‑driven growth strategies for a frontend UI library.
The interview with Ant Design core author Jiang Jilin details the major 4.0 updates such as dark theme, borderless components, RTL support, performance‑focused component rewrites, the expanding ecosystem, design‑development workflow, TypeScript integration, community contributions, and future roadmap for the popular React UI library.
The article announces Ant Design 4.0, outlines its new design specifications, component rewrites, and reduced bundle size, then delves into the underlying philosophy of "happy work" by presenting core design assumptions, value propositions, and the shift from traditional WIMP interfaces toward more natural, proactive user interactions.
This talk explores how SaaS products have progressed from basic functionality to aesthetic appeal and finally to true usability, highlighting the role of Ant Design, rational and emotional user value, and a three‑stage evolution framework for creating products that are both beautiful and genuinely useful.
A roundup of recent tech developments covering GitLab's hiring restrictions on Chinese staff, Huawei's massive R&D investment, the D language 2.089.0 release, Visual Studio Online launch, Ant Design and Electron updates, Edge Chromium preview, Tencent's facial payment initiative, and notable corporate moves by Microsoft Japan, Samsung, and others.
During the holiday season, developers and product managers were startled by an unexpected "Christmas" Easter egg in Ant Design, sparking debates over responsibility, corporate impact, and the risks of undisclosed code changes in widely used open‑source UI libraries.
This article explains a step‑by‑step method for converting a React project that uses Ant Design and MobX from plain JavaScript to a fully typed TypeScript codebase, covering project scaffolding, file migration, configuration adjustments, global variable handling, API typing, store integration, and Sass updates.
The article explores how front‑end typography standards—covering base font size, font‑scale formulas, and line‑height rules—can be derived from visual ergonomics, mathematical ratios, and practical engineering constraints, ultimately recommending 16 px as the optimal base size and a line‑height of font‑size + 8.
This article examines the evolution of Ant Design's color‑palette generation algorithms from the simple tint/shade approach in 1.x, through the HSL‑based Bézier‑easing method in 2.x, to the HSV‑driven implementation in 3.x, highlighting their principles, code implementations, strengths, and shortcomings.
The article recounts the first Ant Financial SEE Conf 2018, then details the conception, mathematical foundations, and practical implementation of Ant Design 3.0's design system—including design language, assets, typography, layout, and color—aimed at improving efficiency, consistency, and user experience for enterprise products.
Over the past two weeks I built a small backend management system using React, React‑Router, MobX, Webpack, Axios, ECharts and Ant Design, and share practical insights on component loading, routing upgrades, state management choices, bundling pitfalls, and UI library usage.
