Ant Design 4.0 rewrites components for easier web app designing
Ant Design is a UI design system and React UI library written in TypeSript used for building enterprise-level web applications. It is written in TypeScript and used by large companies such as Alibaba, Tencent, and Baidu. Take a brief tour of Ant Design’s creation guidelines and design values and see what the newest additions to Version 4 bring to the table.
Ant Design is a UI design system and React UI library written in Typescript used for building enterprise-level web applications. Its newest release, Ant Design 4.0, is the result of collected feedback, developer contributions, and over a month of work.
Used by companies such as Alibaba, Tencent, and Baidu, Ant Design includes React components out of the box for easier app development.
Take a brief tech tour and see what the latest version brings to the table.
Version 4.0 changes
Ant Design 4.0 released on February 28, 2020, adding new updates with only a few breaking changes.
The highlights introduced include:
- Visual improvements: Base rounded corners are reduced from 4 pixels to 2 pixels for streamlined visual efficiency and cleaner visuals. Shadows also receive a visual upgrade and are now more consistent.
- Dark theme: Change to the new color system by clicking the switch theme function.
- New borderless style
- Minimum React version upgraded: React 16.9 or newer required
- Ended support for IE 9/10: All modern browsers and IE 11 (with polyfills) are compatible
- Rewritten Form component: Simplify your code with a form instance by directly binding data through the name property of Form.Item
- Smaller size: Reduced default package size and gzipped bundle size
- Virtual scrolling component: View the live demo
- New calendar: Rewritten date component introduces new DatePicker, TimePicker, and calendar with an optimized range selector
stickystyle tables: New table style reduces performance consumption
- Discarded legacy icons
Refer to the 4.0 changelog for further information about all the new changes.
Ant Design overview
According to its README, the main features of Ant Design:
🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization in every detail.
Its design values prioritize design standards that encourage natural user behavior and an object-oriented approach. Ant Design aims to avoid complicated, messy designs and focuses on ensuring user certainty with consistent appearances.
Leverage libraries such as Ant Motion, a library for creating smooth, concise animation and motion.
Upgrade to v4
For previous Ant Design users, follow the migration guide and upgrade from antd 3.x to antd 4.x. Refer to the incompatible changes introduced in v4, as some incompatible APIs from v3 have been removed. You will need to upgrade to React 16.12.0 or newer in preparation.
Newcomers to the tool should also check out the list of Ant Design resources on GitHub and begin creating your own app with the help of tools, utilities, and theme templates.