How to import the antd library for React

Ant Design is an open-source design system developed by the Ant Group, the parent company of various financial and technology companies, including Alibaba, Alipay, Huabei, and MYbank.

The Ant Design library offers various customizable UI components integrated into React applications. These components include forms, tables, modals, navigation menus, and other interface elements, which can help developers create consistent and user-friendly interfaces for their web applications.

Prerequisites

This Answer assumes you already have the following:

  • Node 8.10 installed on your local development machine

  • The npm 6.0 registry or yarn 1.12.0 installed on your local development machine

  • Basic knowledge of HTML, CSS, JavaScript, and React

Installation

We can add antd to our already existing React application by using npm or yarn as follows:

npm install antd
Installing antd with npm
yarn add antd
Installing antd with yarn

Usage

Now we can import the required antd components in our React component file. For example, if we want to make use of the Button component, we can import it as follows:

import { Button } from 'antd';
Importing the Button component from antd

Code example

Code explanation

This example considers a simple react application that shows the basic use of antd components.

  • Line 2: We import the DatePicker, Space, Button, and Typography components from antd.

  • Line 4: We destructure the Paragraph component from Typography.

  • Line 8: We use the Space component and pass a direction prop to it with a value of vertical. This gives us a vertical layout.

  • Line 9: We use the Paragraph component to show a new paragraph with the text of My Date Picker.

  • Line 10: We use the Datepicker component from antd.

  • Line 11: We make use of the Button component from antd, and we use the type prop with the value of primary, which makes the Button a main/primary button.

Note: If we want to make use of antd styles in our application, we must also import the antd CSS file in our main application file. We can do this by importing antd/dist/reset.css, as seen in line 3 of the index.js code.

Conclusion

The Ant Design library offers various customizable UI components to enrich web applications. To learn more about the various available components, check their component overview.

Free Resources

License: Creative Commons-Attribution NonCommercial-ShareAlike 4.0 (CC-BY-NC-SA 4.0)