How to Use Ant Design in React

Ant Design is a popular React UI library that provides a set of high-quality components and design guidelines for building modern and responsive web applications.

While it’s most suitable for React it can be used in various other libraries and frameworks like Next js, Vite, and Umi.

In this tutorial, we are going to see how we can integrate Ant design in react applications.

#Project Setup

As we want to use Ant Design in React we need a React app already set up, in case if not you may create a new React app.

You may use create=react-app to create a new react application by running the below command

npx create-react-app ant-react

this command will create a new react application with the name ant-react.

or you can use the preferred method like vite.

#Installing Ant Desing library

After the project is created you can navigate to the application with the help of cd command, run the below commands to install Ant Desing in your application.

For npm

cd ant-react

npm install antd

For Yarn

cd ant-react

yarn add antd

It should install Ant Design antd in our application, and now we are ready to use cool Ant Design components and features in our application.

#Using Ant Design components

Ant design provides many types of components for almost everything that we need on an enterprise-level website, ranging from typography to grids and menus.

Follow this link to view all the available components.

Components

Here’s how you can import and use the button component from Ant Design, this process is going to be similar for almost every component in the library.

Write the below import code on the top of any component or page in your application where you want to use the button component

import { Button} from 'antd';

Now you can use this button component like this.

import "./styles.css";
import { Button} from 'antd';

export default function App() {
  return (
    <div className="App">
    <h1> Hello Coders!</h1>

    <Button >Click me </Button>

    </div>
  );
}

This will display the button component with very cool hover animation, but we can change the type of the button by passing the prop called type.

import "./styles.css";
import { Button} from 'antd';

export default function App() {
  return (
    <div className="App">
    <h1> Hello Coders!</h1>

    <Button type="primary" >Click me </Button>

    </div>
  );
}

The above code will produce a button component with the primary background color.

There are 5 types of buttons

Primary button: indicate the main action, one primary button at most in one section.
Default button: indicates a series of actions without priority.
Dashed button: commonly used for adding more actions.
Text button: used for the most secondary action.
Link button: used for external links.

And there are some additional properties with different purposes.

danger: used for actions of risk, like deletion or authorization.
ghost: used in situations with complex backgrounds, home pages usually.
disabled: when actions are not available.
loading: add loading spinner in button, avoiding multiple submit too.

#Conclusion

Just like button components there are many others we you can use in simillar way, I will keep adding tutorials for other components and features as well stay tuned to Tutorend Youtube channel.

Happy Coding.