Ant Design is a ReactUI library that has a plethora of easy to use components that are useful for building an elegant user interface.
Ant Design is also known as “Antd” is a components library for Reactjs. It’s open-source developed by a Chinese company name “Ant Design” own by Alibaba group.
Ant Design has been written in the typescript and works on the modern browser. It supports server-side rendering which is mainly suitable for a web application. There is no need to debug or compile debug JSX and ES2015 code as the proxy request and mocked data are used for external services.
Ant Design is an open-source tool with 66.1K GitHub stars and 26.1K GitHub forks.
Ant Design is used by several companies such as:
- Ant Financial
- Alibaba
- Tencent
Baidu
Koubei
Meituan
Didi
Eleme
Other Users
Feature of Ant Design
Support all modern browser
Enterprise-class design language for web application
A set of high quality react components
The user experience of designer and developer
Powerful theme customization
Package of design and resources development tool
Npm + webpack front end development workflow
Front-end Implementation
React is used to encapsulate a library of components in other front-end frameworks of their choice.
Ant Design of React(official implementation)
NG-ZORRO - Ant Design of Angular
NG-ZORRO-MOBILE - Ant Design Mobile of Angular
Ant Design of Vue
San UI Toolkit for Ant Design
vue-beauty (vue)
antizer (ClojureScript)
antd-ember
antue (vue)
Design principle of Ant Design
Ant Design, according to its own design values page, focusses on a user experience that is:
Natural – a visual interaction that is devoid of complexity and feels natural to use.
Certain – establish new rules to avoid low- efficient difficult to maintain the product.
Meaningful- design interface keeping the needs of the endures in mind.
Growing – design interface that improves the discoverability of functions and values of the product.
Installation of Ant Design
To see Ant Design in action, install it with one of the following commands. it not only makes development easier but also allows you to take advantage of the rich ecosystem of Javascript packages and tooling.
Or
Next, add the code block below to create a card component.
import React from 'react'; import 'antd/dist/antd.css'; import { Card, Button } from 'antd';
const AntDesign = () => (
<Card style={{width: 300}}>
<h3>Ant Design card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p>
<Button type="primary">Read more</Button>
</Card>
);
export default AntDesign;
Ant Design offers a strong platform for creating components. They are well-named and readable in general, and the props received by elements are quite clear. The components can also be customized to fit our design.
Ant components
Ant components contain modals, forms (inline and vertical), navigation menus, and a grid system. But it also contains a ton of extras, such as a timeline, badges, and a seriously nice table system.
Ant Design grid + layout
If you are aware of a bootstrap grid system, you will understand “Antd” grid system bases on rows and cols, just like any other UI library. “Antd” grid system divides your screen area into 24 cols which can make your visible area become more customizable.
Set of high-quality icons
“Antd” comes with a huge number of icons that can fulfill any of your app requirements. “Antd” icons set come with 2 main options: Outlined icons and Filled icons. They even working on Custom icons at the time of this writing:
Support form component
If you are working with the web, you are definitely working with form. “Antd” provides us with a Form component which is a wrapper for your Form Items. For each Form Item, you can use Input, Text Area, Checkbox, Radio, or even Date/Time Picker. In “Antd” component will be handle by API. the most powerful weapon of “Antd” Form is its validation system. All you have to do is specify rules for your Form Item.
Conclusion
In a nutshell, we can say that there’s no doubt that Ant has a lot to offer as a UI framework, with a formidable catalog of components and a serious ecosystem around it.