Open In App
Related Articles

Ant Design Introduction

Like Article
Save Article
Report issue

Ant Design is a React UI library that contains easy-to-use components that are useful for building interactive user interfaces. It is very easy to use as well as integrate. Ant Design is one of the smart options to design web applications using react. It provides us with high-quality components which can be used with ease.

Features of Ant Design:

  • It is written in TypeScript with static types.
  • It has a complete package of development tools that are useful for building interactive user interfaces.
  • It has Internationalization support for a number of languages.
  • It contains high-quality React components.

Installing Ant Design: We can install it using npm. Make sure you have installed Node.js and npm.

Using npm:

npm install antd

Using yarn:

yarn install antd

Let’s understand the working of Ant design using an example.

Example: In this example, we will use the Form component of Ant Design.

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install antd

Project Structure: It will look like the following.

Project Structure

Now write down the following code in the App.js file. Here, App is our default component where we have written our code.


import React from 'react'
import "antd/dist/antd.css";
import { Form, Button, Input } from 'antd';
export default function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
            <h4>ReactJS Ant-Design Form Component</h4>
                onFinishFailed={() => alert('Failed to submit')}
                onFinish={() => alert('Form Submitted')}
                initialValues={{ remember: true }}
                    label="Enter username"
                        required: true,
                        message: 'Please enter username'
                    <Input />
                    <Button type="success" htmlType="submit">
                        Submit Username


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

React Ant Design

Last Updated : 17 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Similar Reads