Introduction to Ant Design
Tags: react
Published: 2020-05-21 13:25:29

---
title: Introduction to Ant Design
published: true
date: 2020-05-01 17:30:35 UTC
tags: react
canonical_url: https://blog.logrocket.com/introduction-to-ant-design/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6v5017t5ugly0rcchddv.png
---
**Written by [Kapeel Kokane](https://blog.logrocket.com/author/kapeelkokane/)**✏️

## Introduction

In a discussion about top frontend design languages, [Material Design](https://material.io/design/) by Google is one of the most popular contenders for the favorite spot, but there is a close, maybe lesser-known, competitor, that is [Ant Design](https://ant.design/). With some of the big players in their respective industries like [Alibaba](http://www.alibaba.com/), [Tencent](http://www.tencent.com/), [Baidu](http://www.tencent.com/) all using Ant Design, let’s explore some of the key features that make Ant Design special compared to others.

## The design principles of Ant Design

Ant design, according to its own [design values](https://ant.design/docs/spec/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 design rules such that it avoids low-efficiency & difficult-to-maintain products
- **Meaningful**—  design interfaces keeping the needs of the end-user in mind
- **Growing**— design interfaces that improve the discoverability of functions and values of the product

## Strongly opinionated

While providing guides on most of the styling needs for user interface design like [colors](https://ant.design/docs/spec/colors), [layout](https://ant.design/docs/spec/layout), [font](https://ant.design/docs/spec/font), [icons](https://ant.design/docs/spec/icon), Ant Design also lays down certain _best practices_ with respect to several visual design principles and clearly marks out the _good_ from the _bad_ ones. Here are a couple of examples from their reference docs:

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

### Text alignment

![alignment](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/alignment.png?resize=1406%2C780&ssl=1)

### Contrast

![contrast](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/contrast.png?resize=1436%2C858&ssl=1)

## Iconography & typography

Ant Design also provides full-fledged in-house support for [icons](https://ant.design/components/icon/) and [typography](https://ant.design/components/typography/) and it’s quite easy to incorporate in the project too. For instance, in order to use the provided icons in your project, all that needs to be done is:

```jsx
npm install --save @ant-design/icons
```

to install the icon pack:

```jsx
import { HomeOutlined } from '@ant-design/icons'
ReactDOM.render(<div><HomeOutlined /></div>, mountNode);
```

## Layout support

Ant Design provides its own alternatives to CSS Flexbox implementation for laying out UI items and to maintain a _fluid and responsive_ user interface. For the same purpose, Ant Design provides [row and column](https://ant.design/components/grid/) components that can be used as alternatives to equivalent divs with flex-direction row and column respectively. For managing size, it accepts a span prop similar to what Bootstrap does:

```jsx
<Row>
  <Col span={12}>col-12</Col>
  <Col span={12}>col-12</Col>
</Row>
```

In addition to that, Ant design provides some of the most common [layouts](https://ant.design/components/layout/), with Navigation Bar, Side Menu, BreadCrumbs, and the main layout area (with different styles) as standard boilerplate that one can use straight away in the project. For example, the layout below can be easily achieved by copying the boilerplate code from their official docs page.

![](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/alttext.png?resize=1744%2C1172&ssl=1)

## Extensive component support

###  Common components

Some of the most widely used form elements are of course available for use with a huge variety of customization options. Here are a few examples along with the code to create generic versions of them.

#### [Text input](https://ant.design/components/input/)

![text input](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/textinput.png?resize=1384%2C956&ssl=1)

```jsx
// component code
<Input 
  size="large" 
  value={this.state.inputVal}
  placeholder="large size"
  onChange={(e) => this.setState({ inputVal: e.target.value })}
  prefix={<UserOutlined />} // prefixes the user image at the beginning
/>
```

#### [Checkbox](https://ant.design/components/checkbox/)

## ![check box](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/checkbox.png?resize=1390%2C1264&ssl=1)

```jsx
// on change handler
onChange = e => {
  this.setState({
    checked: e.target.checked,
  });
};
// checkbox component
<Checkbox
checked={this.state.checked}
disabled={this.state.disabled} // can be managed via state independently
onChange={this.onChange}
>
{label}
</Checkbox>
```

#### [Radio buttons](https://ant.design/components/radio/)

![radio buttons](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/radiobuttons.png?resize=1388%2C924&ssl=1)

```jsx
// on change handler
onChange = e => {
  this.setState({
    value: e.target.value,
  });
};

// radio component, manage the ‘disabled’ boolean separately
<>
  <Radio value={1} disabled={this.state.disabled}>
    Value 1
  </Radio>
  <br />
  <Radio value={2} disabled={this.state.disabled}>
    Value 2
  </Radio>
</>
```

#### [Slider](https://ant.design/components/slider/)

![slider](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/slider.png?resize=1388%2C1068&ssl=1)

```jsx
// on change handler
onChange = value => {
  this.setState({
    inputValue: value,
  });
};

// slider component
<Slider
  min={1} // define a range
  max={20}
  disabled={this.state.disabled} // manage ‘disabled’ separately 
  onChange={this.onChange}
  value={typeof inputValue === 'number' ? inputValue : 0}
/>
```

And, the best part is, all the code for using any variation of these components is available on the same page. You can easily access it by clicking the `<>` button like so:  
 ![select](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/select.gif?resize=730%2C508&ssl=1)

## Compound components

In addition to the basic components mentioned above, there is also a broad range of compound components that Ant Design provides, which supports rapid prototyping and development. These are the components which are widely used in modern user interfaces but take quite an effort to code from scratch. Here are some examples along with Ant Design equivalent code:

#### [Comment](https://ant.design/components/comment/)

![comment](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/comment.png?resize=1390%2C732&ssl=1)

```jsx
<Comment
  actions={actions} // the action button settings
  author={<a>Han Solo</a>} // the name of comment author
  avatar={
    <Avatar src="source_for_avatar.png" alt="Han Solo"/>
  }
  content={// content here} // main comment
/>
```

#### [Card](https://ant.design/components/card/)

#### ![cards](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/cards.png?resize=1310%2C706&ssl=1)

```jsx
<div className="site-card-border-less-wrapper"> // the css class
  <Card title="Card title" bordered={false} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
</div>
```

####  [Carousel](https://ant.design/components/carousel/)

![carousel](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/carousel.png?resize=1396%2C820&ssl=1)

```jsx
// Carousel with autoplay enabled
<Carousel autoplay> 
  <div>
    <h3>1</h3>
  </div>
  <div>
    <h3>2</h3>
  </div>
  <div>
    <h3>2</h3>
  </div>
</Carousel>
```

#### [Timeline](https://ant.design/components/timeline/)

![timeline](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/timeline.png?resize=1398%2C822&ssl=1)

```jsx
<Timeline>
  <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
  <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
```

## React support & documentation

The Ant design framework is designed from the ground up keeping in mind the [React methodologies](https://ant.design/docs/react/introduce). All the components mentioned above have direct support for incorporation with React components available. Also, support for other popular frameworks like Angular and Vue are being [developed](https://ant.design/docs/spec/introduce) by the community.

## Conclusion

With a fluid, responsive UI, clean design language, and also visualization support through [AntV](https://antv.vision/en), Ant Design is surely on the way to grab a huge chunk of the market share when it comes to Industry grade dashboards. Given the extensive list of components, features, and customizations provided by Ant Design, it counts as a worthy candidate when it comes to the selection of your next frontend design framework.

* * * 
## Full visibility into production React apps 

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket.](https://www2.logrocket.com/react-performance-monitoring)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — [start monitoring for free.](https://www2.logrocket.com/react-performance-monitoring)
* * *

The post [Introduction to Ant Design](https://blog.logrocket.com/introduction-to-ant-design/) appeared first on [LogRocket Blog](https://blog.logrocket.com).