Ant Design adoption guide: Overview, examples, and alternatives
Tags: react, webdev
Published: 2024-07-10 18:54:01

**Written by [Elijah Asaolu](https://blog.logrocket.com/author/asaoluelijah/)✏️**

Ant Design prides itself as the second most popular React UI library, with over 90k stars on GitHub as of the time of writing. It's easy to see why, given its plethora of rich and easy-to-use UI components and other features that make building UIs enjoyable. 

In this adoption guide, we'll explore the key features of Ant Design and how to get started using it in a React project, including setup and customization options. We'll also cover practical use cases and a comparison with popular alternatives like Material Design and Bootstrap.

## What is Ant Design?

Ant Design (Antd) was created by the Ant Group (Alibaba's parent company) and released publicly in July 2015\. Since then, the library has expanded to include support for modern UI components, extend its style and customization options, and even adapt to other JavaScript component libraries such as Vue, Angular, and Next.js. 

Ant Design works similarly to other UI libraries. It provides high-quality components and design patterns out of the box. To use it in your project, you simply install it for your preferred framework, import the components you want to use, and further customize it to your needs via the component props or the Antd config file. 

There are multiple big companies — including Alibaba.com, Baidu (the Chinese search engine), Tencent, and many more — already heavily using Ant Design as their primary UI library.

#### _Further reading:_

*   [Introduction to Ant Design](https://blog.logrocket.com/introduction-to-ant-design/)
*   [The top React UI libraries and kits in 2023 #AntDesign](https://blog.logrocket.com/top-react-ui-libraries-kits/#ant-design)
*   [How to use Ant Design with Next.js](https://blog.logrocket.com/use-ant-design-next-js/)
*   [How to use Ant Design with Vue 3](https://blog.logrocket.com/use-ant-design-vue-3/)
*   [The best UI frameworks for Vue 3 #AntDesign](https://blog.logrocket.com/best-ui-frameworks-vue-3/#ant-design-vue)

## Why choose Ant Design?

Ant Design stands out for several key reasons:

*   **Performance and ease of use**: This library provides optimized components that ensure fast and responsive applications. Its comprehensive documentation also makes it easy to spin things up quickly
*   **TypeScript compatibility**: Fully compatible with TypeScript, ensuring type definitions and safety
*   **Integrations**: Easily integrates with other React libraries and CSS frameworks like Tailwind CSS
*   **Mobile UI library**: Antd offers a comprehensive mobile UI library with components for building intuitive mobile applications
*   **Chart and animation libraries**: Built-in libraries for charts and animations enhance visual engagement

However, keep in mind that Ant Design components can be heavy. Additionally, projects with highly unique UI requirements might need extra effort for customization. Despite these cons, Ant Design's robust features and ease of use often outweigh its drawbacks, making it a strong choice for most projects.

## Getting started with Ant Design

To start using Ant Design in a React project, create a new React application by running the command below:

```bash
npm create vite@latest react-antd -- --template react
```

At this point, it’s a good time to install the default dependencies for your new React-Vite project. Next, add the `antd` library by running this command:

```bash
npm install antd
```

With this setup completed, you can now import and use Ant Design UI components in your React app, as shown below:

```javascript
// App.jsx

import "./App.css";
import { Alert } from "antd";

function App() {
  return (
    <>
      <h1>React + Ant Design</h1>
      <Alert
        message="Congratulations!"
        description="You've successfully installed ant design."
        type="success"
        showIcon
      />
    </>
  );
}

export default App;
```

The code above showcases an example of rendering a success alert with Ant Design. Once you run your app, you should get an output similar to the one below: ![Example Success Alert On React And Ant Design App](https://blog.logrocket.com/wp-content/uploads/2024/07/img1-Example-success-alert-React-Ant-Design-app.jpg) Ant Design comes with numerous components and features. Let's briefly examine the most frequently used ones in a typical application.

## Key Ant Design features to know

Ant Design components are organized into the following subgroups: general, layout, navigation, data entry, data display, feedback, and other miscellaneous components. We’ll start by looking at the general group of components.

### General components

The general group contains essential components such as buttons, icons, and typography. 

Ant Design’s `<Button />` component has multiple variants, which you can easily style by updating the component type prop, extending it with an icon via the icon prop, or updating its loading state via the loading prop, as shown in the code sample below:

```javascript
import { SearchOutlined } from "@ant-design/icons";
import { Button, Flex } from "antd";

function Buttons() {
  return (
    <>
      {/* <h1>React + Ant Design</h1> */}

      <Flex gap="large">
        <Button>Default Button</Button>
        <Button type="primary">type="primary"</Button>
        <Button type="dashed">type="dashed"</Button>
        <Button type="link">type="link"</Button>
        <Button type="primary" danger>
          Danger Button
        </Button>
        <Button type="primary" icon={<SearchOutlined />}>
          Button with Icon
        </Button>
        <Button type="primary" loading>
          Loading Button
        </Button>
      </Flex>
    </>
  );
}

export default Buttons;
```

Running this code gives us the following output: ![Ant Design Button Component Variants Including Default, Primary, Dashed, Link, Danger, With Icon, And Loading](https://blog.logrocket.com/wp-content/uploads/2024/07/img2-Ant-Design-Button-component-variants.jpg) Ant Design icons come preinstalled with Ant Design, providing a wide range of icons that integrate seamlessly with Ant Design components: ![Example Ant Design Icons](https://blog.logrocket.com/wp-content/uploads/2024/07/img3-Ant-Design-icons.png) However, you can also install these icons as a standalone package by running the command below:

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

This way, you are able to use the icons in projects that may not require the full Ant Design component library.

### Layout components

The layout group provides all the necessary components to create basic and complex layouts in your application, including grid and flex layouts. As shown below, you can easily create a flexbox layout with the `<Flex />` component and immediately pass in your preferred styling options as props:

```javascript
import { Button, Flex } from "antd";
const FlexBox = () => {
  return (
    <Flex justify="space-around" align="center">
      {[1, 2, 3, 4].map((item) => (
        <Button type="primary" key={item}>
          Flex Item
        </Button>
      ))}
    </Flex>
  );
};
export default FlexBox;
// Note: We've utilized mapping an array in this code sample to avoid repetition.
```

Running this code produces the following result: ![Example Flex Layout In React And Ant Design Showing App Title And Four Flex Items In A Row Within A Thin Line Rounded Corner Box](https://blog.logrocket.com/wp-content/uploads/2024/07/img4-React-Ant-Design-flex-layout-demo.jpg) Similarly, you can easily utilize the `<Row />` and `<Col />` components for grid layouts, as shown below:

```javascript
import { Col, Row } from "antd";
const style = {
  background: "#0092ff",
  padding: "20px",
};
const GridLayout = () => (
  <>
    <Row gutter={16}>
      {[1, 2, 3, 4].map((item) => (
        <Col className="gutter-row" span={6} key={item}>
          <div style={style}>col-6</div>
        </Col>
      ))}
    </Row>
  </>
);
export default GridLayout;
```

Here’s the result of the code above: ![Example Grid Layout In React And Ant Design Showing App Title And Four Columns In One Row](https://blog.logrocket.com/wp-content/uploads/2024/07/img5-React-Ant-Design-grid-layout-demo.jpg)

### Data entry and display components

Ant Design provides multiple customizable components for data entry and data display. This results in beautifully styled and customizable form elements like inputs, color and file pickers, select components, rating components, switches, sliders, and more:

<span style="color: #ff0000;">**![Example Data Entry Components In A React And Ant Design Project Including Basic Inputs Like A Text Input, Selection Controls Like A Dropdown, And Other Controls Like Sliders](https://blog.logrocket.com/wp-content/uploads/2024/07/img6-React-Ant-Design-data-entry-components-inputs-selections-other-controls.jpg)**</span>

Also, Ant Design provides a `<Form />` component that makes it super easy to programmatically access form data and their states and design forms with multiple layouts. 

The data display group, on the other hand, features everything from cards, carousels, accordions, tables, tabs, and popovers to even more unique components like QR codes, timelines, and more: ![Example Data Display Components In A React And Ant Design Project Including Basic Displays Like Notifications, Structured Displays Like Cards, And Interactive Displays Like Tabs And Accordions](https://blog.logrocket.com/wp-content/uploads/2024/07/img7-React-Ant-Design-data-display-components-basic-structured-interactive-displays.jpg)

#### _Further reading:_

*   [Options for building React Native collapsible accordions #Ant Design accordion](https://blog.logrocket.com/building-react-native-collapsible-accordions/#accordion-ant-design)

### Feedback components

The feedback group contains all the components you need to render different message states to your users. These include alerts, drawer modals, popup confirmation modals, skeleton loaders, and more. Below you can see an example of these components: ![Demo Of React And Ant Design Feedback Components In Action. Various Components Are Displayed, Including Basic, Interactive, Confirmation, And Loading, While The User Interacts With Them To Pop Up Notifications, Toasts, Drawers, And More](https://blog.logrocket.com/wp-content/uploads/2024/07/img8-Demo-React-Ant-Design-feedback-components-basic-interactive-confirmation-loading.gif)

### Internationalization capabilities

Internationalization (i18n) is crucial for creating applications that can reach a global audience. Ant Design provides robust internationalization support for over 50 languages. This makes it easy to adapt your application to different locales. 

For example, to change your app language to Spanish, you can import Ant Design's `ConfigProvider` along with the language you want to use and wrap your app around it, as shown below:

```javascript
// main.jsx
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

import { ConfigProvider } from "antd";
import esES from "antd/locale/es_ES.js";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ConfigProvider locale={esES}>
    <App />
  </ConfigProvider>
);
```

Once you wrap your app in the ConfigProvider with the locale set to `esES`, any text in your components should now change to Spanish, providing a localized user experience.

## Customizing your Ant Design theme

Ant Design allows you to customize the theme of your application, tailoring the look and feel to match your design taste or project requirements. We can also easily do this with the `ConfigProvider`, as shown below:

```javascript
import { ConfigProvider } from "antd";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: "#00ccff",
        borderRadius: 3,
      },
    }}
  >
    <App />
  </ConfigProvider>
);
```

With this change, your application's primary color should change to `#00ccff`, and the default `border-radius` should be `3px`.

## Use cases for Ant Design

Ant Design's feature set makes it suitable for various business applications. Its extensive component library supports enterprise applications, ecommerce platforms, and mobile apps. 

Companies like Alibaba and Baidu leverage Ant Design for scalable internal tools and dashboards. At the same time, ecommerce platforms benefit from its customizable components for product listings, user accounts, and payment processing. 

Ant Design's chart and animation libraries also make it ideal for data visualization tools, which are essential for businesses that need to analyze and present data effectively.

#### _Further reading:_

*   [Data visualization with React and Ant Design](https://blog.logrocket.com/data-visualization-with-react-ant-design/)

## Ant Design vs. Material Design and Bootstrap

When people mention CSS libraries, names like Bootstrap and Material Design often come to mind first. However, Ant Design is just as effective, with its robust set of features and customization options. 

While Bootstrap is renowned for its simplicity and ease of use and Material Design for its modern, mobile-first approach, Ant Design excels in providing comprehensive components suitable for complex, enterprise-level applications.

Each library has its unique strengths, making them suitable for different project needs. The table below highlights their major differences:

<table>

<thead>

<tr>

<th>Feature</th>

<th>Ant Design</th>

<th>Material Design</th>

<th>Bootstrap</th>

</tr>

</thead>

<tbody>

<tr>

<td>Performance</td>

<td>Optimized components, larger bundle size, requires tree-shaking</td>

<td>Lightweight, fast, mobile-optimized</td>

<td>Fast load times, responsive design, minimal configuration</td>

</tr>

<tr>

<td>Community</td>

<td>Large, active community, enterprise-level contributions</td>

<td>Vast community, strong Google support</td>

<td>Largest community, extensive third-party plugins and themes</td>

</tr>

<tr>

<td>Documentation/Resources</td>

<td>Detailed, well-organized, comprehensive examples, extensive API documentation</td>

<td>Extensive guidelines, numerous examples, detailed component API</td>

<td>Straightforward, easy-to-follow, numerous examples, extensive customization documentation</td>

</tr>

<tr>

<td>Component variety</td>

<td>Advanced data entry/display, charting, animation support</td>

<td>Standard UI components, rich animations</td>

<td>Basic UI components, utility classes, responsive design</td>

</tr>

<tr>

<td>Customization</td>

<td>Less variables, theme overrides, dynamic theming</td>

<td>CSS variables, theming, adaptable to brand guidelines</td>

<td>Sass variables, theming, wide range of pre-built themes</td>

</tr>

<tr>

<td>Internationalization</td>

<td>Built-in support, 50+ languages, easy locale switching</td>

<td>Supports internationalization, RTL support</td>

<td>Basic support, community-driven translations</td>

</tr>

</tbody>

</table>

This table should be a helpful resource as you choose a UI library for your next React project.

#### _Further reading:_

*   [Comparing popular React component libraries](https://blog.logrocket.com/comparing-popular-react-component-libraries/#antdesign)

## Conclusion

In this adoption guide, we've explored the key features and advantages of Ant Design, demonstrated its practical use cases, and compared it with other popular UI libraries like Material Design and Bootstrap. We've covered how to get started with Ant Design, including setup and customization, and highlighted its performance, community support, and documentation resources. 

You can also [explore all the code samples used in this article here](https://github.com/AsaoluElijah/antd-react). Thanks for reading!

---

##Get set up with LogRocket's modern error tracking in minutes:

1. Visit https://logrocket.com/signup/ to get an app ID.
2. Install LogRocket via NPM or script tag. `LogRocket.init()` must be called client-side, not server-side.

NPM:
```bash
$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');
```
Script Tag:
```javascript
Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
```

3.(Optional) Install plugins for deeper integrations with your stack:
*   Redux middleware
*   ngrx middleware
*   Vuex plugin

[Get started now](https://lp.logrocket.com/blg/signup)