Latest release: Ant Design Web3, a new Web3 open source component library based on Ant Design, adds to the Ant Design family. The Ant Design design system launched by Ant Financial has always provided excellent design solutions for enterprise-level products. With continuous iteration, multiple related products have emerged in the Ant Design family, bringing great convenience to front-end development. Let's explore the many products of the Ant Design family. How many of them have you already used?
1. Ant Design component library
Ant Design component library is a React UI component library based on the Ant Design design system, which provides a wealth of commonly used UI components for enterprise-level mid- and back-end products. From tables, buttons, and forms to prompt boxes and tree controls, this library provides a package of high-quality React components required for enterprise-level product development. Developed using TypeScript and provided with complete type definition files.
Ant Design is implemented using React, and the community also provides implementations of some other technologies:
-
NG-ZORRO - Ant Design[1]
-
NG-ZORRO-MOBILE - Ant Design Mobile of Angular[2]
-
Ant Design of Vue[3]
Official website : https://ant.design/
2. Ant Design Pro
Ant Design Pro is an enterprise-level mid- and back-end front-end/design solution, using React and Ant Design as the basic framework. It provides versatile layout and design components that enable automated building of front-end applications. It focuses on building enterprise-level management backend and front-end applications, including routing, permission management, internationalization, data simulation, and engineering, to help developers quickly build feature-rich management systems.
Official website : https://pro.ant.design/
3. Ant Design Web3
Ant Design Web3 is a Web3 React component library based on Ant Design, focusing on helping to quickly build decentralized applications (DApp). In addition to the basic components, it also provides the ability to interact with the chain and has multi-chain compatibility. Ant Design Web3 defines a common API, supports chains such as Ethereum, and gives components capabilities beyond the UI.
The features of Ant Design Web3 are as follows:
-
Ant Design friendly : The design system of Ant Design Web3 is seamlessly connected with Ant Design, making it easier for developers to use.
-
Out-of-the-box experience : You can quickly set up your project and leverage pre-built components to create DApps.
-
Compatibility with different chains : Ant Design Web3 is designed to be well extensible, allowing adaptation to different chains through adapters.
Ant Design Web3 defines a set of common APIs, based on which different blockchains can be connected through the adaptation layer. Currently, Ethereum (including EVM-compatible chains) is supported, and we will try to support more chains in the future.
Official website : https://web3.ant.design/
4. Ant Design Pro Components
Ant Design Pro Components is a template component based on Ant Design, which provides higher-level abstraction support and can significantly improve the efficiency of creating CRUD pages. As the main component library of Ant Design Pro, it has built-in design specifications, common logic and flexible support to help developers focus more on page construction.
Official website : https://procomponents.ant.design/
5. Ant Design Mobile
Ant Design Mobile is a React implementation of the Ant Design mobile specification. It provides 40+ high-quality basic components and is suitable for developing mobile products. The UI style is highly configurable, fully compatible with react/preact, and has multi-platform support for iOS/Android/Web based on React Native to meet various functional needs.
Official website: https://ant-design-mobile.antgroup.com/
6. Ant Design Mini
Ant Design Mini is a mini program UI component library based on Ant Design, supporting Alipay mini program, WeChat mini program (Beta), and uniapp. Characterized by high performance, customizability and atomization, it provides smooth gestures and animations to help products create the ultimate experience.
-
High performance: no configuration required, you can have the best package size and ultimate performance
-
Customizable: You can efficiently adjust the appearance of components or create your own themes
-
Atomization: Each component has neither more nor less functions, just what you need
-
Smoothness: With smooth gestures and delicate animations, it helps the product create the ultimate experience
Official website: https://ant-design-mini.antgroup.com/
7. Ant Design Charts（Antv）
Ant Design Charts is a data visualization component library provided by Antv and is the official chart component solution of Ant Design. It supports a variety of visual effects, provides a variety of chart types, and is compatible with the React technology stack.
AntV is a brand new view visualization chart library provided by Ant Group. It is based on graphics and covers many fields such as traditional statistical charts, relational data visualization, geospatial data visualization, mobile charts, 2D drawing engines and intelligent visualization. It mainly Contains more than a dozen projects such as G2, G6, X6, L7, F2, AVA, etc., as well as a complete set of chart usage and design specifications.
Official website: https://ant-design-charts.antgroup.com/
8. Ant Design Landing
Ant Design Landing is a solution specially designed for product homepages. It inherits the design principles of Ant Design to quickly build the homepage that users need and improve work efficiency.
Official website: https://landing.ant.design/
9. Ant Motion
Ant Motion is an animation language extracted from Ant Design and a set of React framework animation solutions. It helps developers use animation effects in projects more easily and achieve the required animation effects through simple configuration, including single animation, combined animation, etc.
Official website: https://motion.ant.design/
10. Scaffolds
Scaffolds is a rich and practical collection of scaffolding that provides convenient development tools.
Official website: https://scaffold.ant.design/
[1]Ant Design of Angular： http://ng.ant.design/
[2]Ant Design Mobile of Angular： http://ng.mobile.ant.design/
[3]Ant Design of Vue： http://antdv.com/
