React is one of the most used web frameworks due to its component based approach. There are tons of component libraries that provide us pre pre-built front-end components. React believes in isolated components with high usability which inspires these front-libraries. Material UI is one of such libraries that is quite popular in the industry. In this article, we will see what Material UI is and how we can use it in our projects. So, let us get started.
&nbsp;
What is Material UI?
Material UI is a component based library inspired by Google&rsquo;s Material Design systems and is extremely popular in creating web and mobile applications. It enabled the developers to create smooth and fluid designs without implementing everything from scratch. Let us see how we can install and use it in a React project.
&nbsp;
Prerequisites
To use this library in your project, make sure you have installed Node.js and Node Package Manager in your machine. You will also be needing a code editor.
&nbsp;
Getting started
Navigate to the directory of your choice and enter the following command to create a react project.
<code>npx create-react-app material-ui-example</code>
Once the project dependencies install, navigate to the project directory and install the Material UI library for react with the following command.
<code>npm install @mui/material @emotion/react @emotion/styled</code>
&nbsp;
Setting the font
Material UI is based on Roboto font and to use it, navigate to public/index.html and add the following tag in the head section.
<pre class="language-markup"><code>&lt;link
 rel="stylesheet"
 href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap"
/&gt;</code></pre>
&nbsp;
Installing SVG icons
In Material UI, you have a separate package for using SVG icons inside your project. We can install it with the following command.
<code>npm install @mui/icons-material</code>
&nbsp;
Cleaning the project
By default, you get the following files in a react project.
&nbsp;
&nbsp;
Let us clean it and make it look like below.
&nbsp;
&nbsp;
App.js
<pre class="language-javascript"><code>function App() {

 return (

 &lt;div&gt;

 //our code here

 &lt;/div&gt;

 );

}



export default App;</code></pre>
&nbsp;
Index.js
<pre class="language-javascript"><code>import React from "react";
import ReactDOM from "react-dom";
import App from "./App";



ReactDOM.render(
 &lt;React.StrictMode&gt;
 &lt;App /&gt;
 &lt;/React.StrictMode&gt;,
 document.getElementById("root")
);</code></pre>
&nbsp;
&nbsp;
Using the components
Material UI offers tons of components that are essential while creating beautiful frontends. Let us diver deeper into the library and see what it has to offer.
&nbsp;
Button&nbsp;
<pre class="language-markup"><code>import * as React from "react";
import Button from "@mui/material/Button";



export default function App() {
 return (
 &lt;&gt;
 &lt;Button variant="text" size="small" color="success"&gt;
 Text
 &lt;/Button&gt;

 &lt;Button variant="contained" size="medium" color="warning"&gt;
 Contained
 &lt;/Button&gt;

 &lt;Button variant="outlined" size="large" color="error"&gt;
 Outlined
 &lt;/Button&gt;
 &lt;/&gt;
 );
}

</code></pre>
The button component offers different props for the functionality. In the above code, we have 3 buttons with different variants, sizes and colors.&nbsp;
&nbsp;
&nbsp;
Button Group
<pre class="language-markup"><code>import * as React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";



export default function App() {
 return (
 &lt;ButtonGroup variant="contained" aria-label="outlined success button group"&gt;
 &lt;Button color="success"&gt;One&lt;/Button&gt;
 &lt;Button color="warning"&gt;Two&lt;/Button&gt;
 &lt;Button color="error"&gt;Three&lt;/Button&gt;
 &lt;/ButtonGroup&gt;
 );
}</code></pre>
&nbsp;You also get a button group component that lets you use buttons as a group. It accepts the variant prop and you can apply individual styles to the button components.
&nbsp;
&nbsp;
&nbsp;
Icons
<pre class="language-markup"><code>import * as React from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import ThreeDRotationIcon from "@mui/icons-material/ThreeDRotation";
import FourKIcon from "@mui/icons-material/FourK";
import ThreeSixtyIcon from "@mui/icons-material/ThreeSixty";


export default function App() {
 return (
 &lt;&gt;
 &lt;DeleteIcon /&gt;
 &lt;ThreeDRotationIcon /&gt;
 &lt;FourKIcon /&gt;
 &lt;ThreeSixtyIcon /&gt;
 &lt;/&gt;
 );
}

</code></pre>
We have four different Icons that are in the Material UI icons library. All of these use the SVG Icon component to render the path for the each icon.&nbsp;
&nbsp;
&nbsp;
&nbsp;
In case you aim to use a different SVG that is not in the material icons library, you can do it as follows.
<pre class="language-markup"><code>import { SvgIcon } from "@mui/material";
import * as React from "react";



export default function App() {

 return (
 &lt;&gt;
 &lt;SvgIcon&gt;
 &lt;path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /&gt;
 &lt;/SvgIcon&gt;
 &lt;/&gt;
 );
}</code></pre>
&nbsp;
&nbsp;
Accordion
<pre class="language-markup"><code>import * as React from "react";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/Expand";


export default function App() {
 return (
 &lt;div&gt;
 &lt;Accordion&gt;
 &lt;AccordionSummary
 expandIcon={&lt;ExpandMoreIcon /&gt;}
 aria-controls="panel1a-content"
 id="panel1a-header"
 &gt;
 &lt;Typography&gt;Accordion 1&lt;/Typography&gt;
 &lt;/AccordionSummary&gt;
 &lt;AccordionDetails&gt;
 &lt;Typography&gt;Accordion 1 text&lt;/Typography&gt;
 &lt;/AccordionDetails&gt;
 &lt;/Accordion&gt;

 &lt;Accordion&gt;
 &lt;AccordionSummary
 expandIcon={&lt;ExpandMoreIcon /&gt;}
 aria-controls="panel2a-content"
 id="panel2a-header"
 &gt;
 &lt;Typography&gt;Accordion 2&lt;/Typography&gt;
 &lt;/AccordionSummary&gt;
 &lt;AccordionDetails&gt;
 &lt;Typography&gt;Accordion 2 text&lt;/Typography&gt;
 &lt;/AccordionDetails&gt;
 &lt;/Accordion&gt;

 &lt;Accordion disabled&gt;
 &lt;AccordionSummary
 expandIcon={&lt;ExpandMoreIcon /&gt;}
 aria-controls="panel3a-content"
 id="panel3a-header"
 &gt;
 &lt;Typography&gt;Disabled Accordion&lt;/Typography&gt;
 &lt;/AccordionSummary&gt;
 &lt;/Accordion&gt;
 &lt;/div&gt;

 );

}</code></pre>
The <code>Accordion</code> component wraps <code>AccordionSummary</code> which wraps the <code>AccordionDetail</code> component. Inside the detail, we add content as we please. To disable the accordion, just pass the disabled prop to it.&nbsp;
&nbsp;
&nbsp;
&nbsp;
Typography
<pre class="language-markup"><code>import * as React from "react";
import Typography from "@mui/material/Typography";


export default function App() {
 return (
 &lt;&gt;
 &lt;Typography variant="h1" component="div"&gt;
 h1. Heading
 &lt;/Typography&gt;

 &lt;Typography variant="h2" component="div"&gt;
 h2. Heading
 &lt;/Typography&gt;

 &lt;Typography variant="h3" component="div"&gt;
 h3. Heading
 &lt;/Typography&gt;

 &lt;Typography variant="h4" component="div"&gt;
 h4. Heading
 &lt;/Typography&gt;

 &lt;Typography variant="h5" component="div"&gt;
 h5. Heading
 &lt;/Typography&gt;

 &lt;Typography variant="h6" component="div"&gt;
 h6. Heading
 &lt;/Typography&gt;

 &lt;Typography variant="subtitle1" component="div"&gt;
 Subtitle 1
 &lt;/Typography&gt;

 &lt;Typography variant="subtitle2" component="div"&gt;
 Subtitle 2
 &lt;/Typography&gt;

 &lt;Typography variant="body1"&gt;Body1&lt;/Typography&gt;

 &lt;Typography variant="body2"&gt;Body2&lt;/Typography&gt;

 &lt;Typography variant="button" display="block"&gt;
 button text
 &lt;/Typography&gt;

 &lt;Typography variant="caption" display="block"&gt;
 caption text
 &lt;/Typography&gt;

 &lt;Typography variant="overline" display="block"&gt;
 overline text
 &lt;/Typography&gt;
 &lt;/&gt;
 );
}</code></pre>
In the above code, we have the typography component which has a lot of variants.&nbsp;
&nbsp;
&nbsp;
Alerts
<pre class="language-markup"><code>import * as React from "react";
import Alert from "@mui/material/Alert";


export default function App() {
 return (
 &lt;&gt;
 &lt;Alert severity="error"&gt;This is an error alert&lt;/Alert&gt;
 &lt;Alert severity="warning"&gt;This is a warning alert&lt;/Alert&gt;
 &lt;Alert severity="info"&gt;This is an info alert&lt;/Alert&gt;
 &lt;Alert severity="success"&gt;This is a success alert&lt;/Alert&gt;
 &lt;/&gt;
 );
}

</code></pre>
Material UI has 4 different alerts which are used above.
&nbsp;
&nbsp;
&nbsp;
Card&nbsp;
<pre class="language-markup"><code>import * as React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

export default function App() {
 return (
 &lt;Card sx={{ maxWidth: 275 }}&gt;
 &lt;CardContent&gt;
 &lt;Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom&gt;
 Word of the Day
 &lt;/Typography&gt;
 &lt;Typography variant="h5" component="div"&gt;
 Material
 &lt;/Typography&gt;
 &lt;Typography sx={{ mb: 1.5 }} color="text.secondary"&gt;
 Noun
 &lt;/Typography&gt;
 &lt;/CardContent&gt;
 &lt;CardActions&gt;
 &lt;Button size="small"&gt;Learn More&lt;/Button&gt;
 &lt;/CardActions&gt;
 &lt;/Card&gt;
 );
}</code></pre>
The main card component is the outer component which has<code> CardContent</code> for the visual data and <code>CardActions</code> for event handling.
&nbsp;
&nbsp;
TextField
<pre class="language-markup"><code>import * as React from "react";
import TextField from "@mui/material/TextField";

export default function App() {
 return (
 &lt;&gt;
 &lt;TextField id="outlined-basic" label="Outlined" variant="outlined" /&gt;
 &lt;TextField id="filled-basic" label="Filled" variant="filled" /&gt;
 &lt;TextField id="standard-basic" label="Standard" variant="standard" /&gt;
 &lt;/&gt;
 );
}</code></pre>
&nbsp;
&nbsp;
Conclusion
Material UI enables the developers to make beautiful designs. In this article, we have seen how you can install and use Material UI in your react project. We have used some of the components that will be enough to set you up for further learning.

Material UI React Components

React is one of the most used web frameworks due to its component based approach. There are tons of component libraries that provide us pre pre-built 