Ant Design of React

06 Oct, 2019

An enterprise-class UI design language and React UI library

Ant Design (antd) is the best UI design system for web applications and a set of high quality React components ,written in TypeScript, huge ecosystem with resources and tools

Home Page - 52k ⭐️ GitHub - Ant Design of React

Ant Design React is dedicated to providing a good development experience for programmers. Make sure that you have installed Node.js(> 8.0.0) correctly.

Ant Design was born in China, being developed by mostly chinese contributors and heavily used by chinese companies like Ant Financial, Alibaba, Tencent, Baidu, etc.

Introduction

In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.

After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.

Ant Design which is specially created for internal desktop applications, is committed to improving the experience of users and product designers.

User interface designers and user experience designers, collectively, are considered as product designers, and the boundaries of product managers, interaction designers, visual designers, front-end developers and develop engineers are blurred.

Taking advantage of unitary specifications, Ant Design makes design and prototype more simple and accessible for all project members, which comprehensively promotes experience and development efficiency of background applications and products.

Features

  • An enterprise-class UI design system for web applications.
  • A set of high-quality React components out of the box.
  • Written in TypeScript with predictable static types.
  • The whole package of development and design resources and tools.

Environment

  • Modern browsers and Internet Explorer 9+ (with polyfills)
  • Server-side Rendering
  • Electron

Design System

Ant Design supplies a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.

Components

  • General (Icon, Button, Typography)
  • Layout (Grid, Layout)
  • Navigation (Affix, Breadcrumb, Dropdown, Menu, Pagination, ...)
  • Data Entry (AutoComplete, Checkbox, DatePicker, Form, Upload ...)
  • Data Display (Avatar, Badge, Comment, Collapse, Carousel, Card, ...)
  • Feedback (Alert, Drawer, Modal, Message, Notification, Progress, ...)
  • Other (Anchor, BackTop, ConfigProvider, Divider, ...)

Ecosystem

In real project development, you might need a data flow solution like Redux or MobX. Ant Design React is a UI library that can be used with any data flow solution and application framework within the React ecosystem. Creators have launched dva based on Redux, as well as a pluggable enterprise application framework umi, which is recommended for use in your projects.

dva is a lightweight data flow solution based on Redux. The concept comes from elm. It supports side effects, hot module replacement, dynamic loading, react-native, SSR, etc. It has been widely used in production.

umi is a routing-based framework that supports next.js-like conventional routing and various advanced routing functions, such as routing-level on-demand loading. With a complete plugin system that covers every life cycle from source code to build product, umi is able to support various functional extensions and business needs.

Ant Design Pro is a production-ready solution for admin interfaces. Built on the design principles developed by Ant Design, this project introduces higher level components; creators have developed templates, components, and a corresponding design kit to improve the user and development experience for admin interfaces.

antd is designed to provide high-quality React UI components which follow the Ant Design Specification. So, creators are not going to implement other functions which are not relative to antd's target, and recommend using the excellent third-party library which have come from the React community.


Same series:

Tech Explained