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.
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
We can add antd to our already existing React application by using npm or yarn as follows:
npm install antd
yarn add antd
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';
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
antdstyles in our application, we must also import theantdCSS file in our main application file. We can do this by importingantd/dist/reset.css, as seen in line 3 of theindex.jscode.
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.