React Material UI

Material Design is a language of design that was introduced by Google in 2014 for creating more complex, responsive web applications and mobile applications. To use material design in React web applications we need to installa  Material UI library in our project. The Material UI open source library provides a set of components that we can use in React applications. We can customize the theme and components of Material UI library.
Official website
Steps for Material UI installation:
Steps 1
To install Material UI library, we need to create a React application.
Execute the following npm command to create a web application.
npx create-react-app reactjs-materailui
Create a project
Steps 2
Now, change the project directory and run development server.
Use the below command,
cd reactjs-materailui
npm start
Run npm command
After successful execution of the above command, it will automatically open the browser and run your newly created application on the browser.
Default URL :- http://localhost:3000/
Startup page of React application,
Default screen of react app
Steps 3
Next, we need to install Material UI library by using the below command,
npm install @material-ui/core
Install material UI lib
Steps 4
We need to import/install Roboto Font in our application. (Material UI library was designed with Roboto font.)
using CDN: - add below CDN link into index.html
<link rel="stylesheet" href=",400,500,700&display=swap" />
Index page
Using install library
Execute the below command,
npm install typeface-roboto –save
Import following line of code into index.js file (Need to import into entry point)
import 'typeface-roboto';
Steps 5
Import Material icons to use the font icon component. Execute the below command to install icons.
npm install @material-ui/icons
Steps 6
Now, it;s time to open your project in code editor. Execute the below command to open created project in Visual Studio code.
code .
Open vs code editor
Steps 7
Check material UI library and Roboto font entry into package.json file
package josn file
Let’s create a login form using Material UI,
In this example, I am going to create a basic login form UI using Material UI library so that you will get an idea about how to add component in React applications and how to use that component in project code.
Demo screen
Demo login form
Remove existing code from App.js file and add a basic code like below,
  1. import React from 'react';  
  2. class App extends React.Component {  
  3.    render() {  
  4.       return (  
  5.       );  
  6.    }  
  7. }  
  8. export default App;  
To add text box for email address and password field, import TextField component from Material UI library. To add button for login form we should import Button component, similarly Grid component for grid layout, Typography for heading. Import the below line of code into App.js file
  1. import TextField from '@material-ui/core/TextField';  
  2. import Button from '@material-ui/core/Button';  
  3. import Grid from '@material-ui/core/Grid';  
  4. import Typography from '@material-ui/core/Typography';  
To create a textbox for email address we need to add TextField component in App component of App.js. Add TextField tag like below code in App component.
  1. class App extends React.Component {  
  2.    render () {  
  3.       return (  
  4.          <TextField  
  5.             variant="outlined"  
  6.             margin="normal"  
  7.             label="Email Address"  
  8.          />  
  9.       );  
  10.    }  
  11. }  
  12. export default App;  
Text box
Similarly, add <Button /> tag and <Grid /> tag for creating button and grid layout.
Complete Code
  1. import React from 'react';  
  2. import Button from '@material-ui/core/Button';  
  3. import TextField from '@material-ui/core/TextField';  
  4. import Grid from '@material-ui/core/Grid';  
  5. import Typography from '@material-ui/core/Typography';  
  6. import 'typeface-roboto';  
  7. class App extends React.Component {  
  8.    handleLogin = () => {  
  9.    alert("Login form example using MATERIAL UI");  
  10. }  
  11. render() {  
  12.    return (  
  13.       <Grid  
  14.          container  
  15.          spacing={0}  
  16.          direction="column"  
  17.          alignItems="center"  
  18.          justify="center"  
  19.          style={{ minHeight: '100vh' }}  
  20.          >  
  21.    <Typography component="h1" variant="h5">  
  22.       Log in  
  23.    </Typography>  
  24.    <form onSubmit={this.handleLogin}>  
  25.    <TextField  
  26.       variant="outlined"  
  27.       margin="normal"  
  28.       fullWidth  
  29.       label="Email Address"  
  30.    />  
  31.    <TextField  
  32.       variant="outlined"  
  33.       margin="normal"  
  34.       fullWidth  
  35.       label="Password"  
  36.       type="password"  
  37.    />  
  38.    <Button  
  39.       type="submit"  
  40.       fullWidth  
  41.       variant="contained"  
  42.       color="primary"  
  43.       >  
  44.       Log In  
  45.       </Button>  
  46.    </form>  
  47.   </Grid>  
  48.   );  
  49.  }    
  50. }  
  51. export default App;  
Login form design
You can see I have created a basic login form design using Material UI library. Design is looking nice and responsive with proper spacing, coloring, and heading.


In this article, I discussed Material UI library and how to install Material UI library in React web applications. At the end of this article, we saw how to add Material UI components in React web applications and an example of basic login form design.

Similar Articles