MUI in react-with-typescript application
Tags: beginners, react, typescript, design
Published: 2022-01-03 14:50:48

If you want to build simple, faster, beautiful and highly customizable application then MUI (previously called Material UI)  is the best option. It provides almost all built in components for designing your website.

The ready to use components make it really simple for a beginner in terms of understanding and also helps in building an app quickly.

MUI is created by Google and it provides an exhaustive framework for creating websites and applications with high interactive and  mobile first UI with responsive designs.

**NASA, amazon, unity, JPMorgan** are few of the popular sites using MUI.

---

Here, we will see MUI component usage in a react-with-typescript application.

## Steps to create a react-with-typescript application

1. Use any editor and type the following command to create the application. I am using Visual Studio Code editor

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzalfi9hoay7mvrd3q2i.PNG) 
 
2.The react application will be created with files having .ts and .tsx extension in the src folder as below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8aaiddcg8d7jnu1xvzod.PNG)

3.Start the application using below command which will run the default application:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ja97k62366ypg2ao8vu.PNG)

4.The default application will load on localhost as below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jq4g2ffrsbffp0fech5.PNG)

Your default react application is ready now.

**<u>How to use MUI components in your application</u>**

MUI is available as an npm package. So, you have to install it in your application using a command. In order to install it, open your application and in the terminal, execute the below command


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b78wpkwahpfsd518nbo1.PNG)

This will add the materialui package in the package.json file of your application as shown below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lhosk6mknmidy9vwcik.PNG)

---

Now, I will show how to use MUI component in your application by using a simple button component. Follow below steps:

1.Go to [MUI Button component](https://mui.com/components/buttons/) and copy the below highlighted lines of code that we will use in the application 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qdp1nnbz80jy82b5waj.PNG)

2.Paste the copied lines in the App.tsx file at line nos 4 and 22 respectively



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nttp20uhdm7w3y7tqcxt.PNG)

3.Execute **_npm start_** command in the terminal and see that the MUI  button is displayed 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhx5fvz6bjgpa40oo512.PNG)

## <u>Conclusion</u>

Above is a very basic example of using MUI component. You can explore more by visiting the MUI website for using different built in components as per your requirements. MUI also provides responsive components and comes with a lot of attributes that make UI design easy to implement.