How to install Material UI v5

Key takeaways:

• Material UI is an open-source React UI library using Google’s Material Design, with components optimized for React applications.

• Version 5 was released in 2021. It injects only necessary styles for efficient performance.

• Installation requires Node.js and a React project.

• Material UI and icons are installed via following terminal commands.

  • npm install @mui/material @emotion/react @emotion/styled

  • npm install @mui/icons-material

Material UI is an open-source React UI library released in 2014. It consists of predefined components that can easily be used in the React applications. The library implements Google’s Material Design. Material UI components are self-supporting and only inject the styles they need to display. The version 5 for Material UI was released in 2021. In this Answer, we will see how we can install Material UI v5 in the React application.

Prerequisites

Before we begin, ensure you have the following:

• Node.js installed on the system. You can download it from Node.js official websitehttps://nodejs.org/.

• A React project set up. If you don’t have one, create a new React project by following our detailed Answer on "How to create a simple app using React".

Material UI installation

To use Material UI in the React application, we need to run one of the following commands in the React project directory's terminal:

Further, we need to install Material UI icons in the React app. We can run the following commands to do so.

Material UI uses Roboto font for its texts. Therefore, we can run the following command to install the font.

Execution commands

In the terminal below, a React application is configured. We can run the following commands and install Material UI.

1. npm install @mui/material @emotion/react @emotion/styled

2. npm install @mui/icons-material

3. npm install @fontsource/roboto

4. To confirm that all dependencies for Material UI have been installed, we can check the package.json file and see that the dependencies are added under the dependencies section. Run the cat package.json command in the terminal to view the contents.

After running the above commands, we can now use the components provided by the Material UI.

After installing Material UI, dive deeper into building stunning interfaces with its powerful components. Explore how to use Accordion, Buttons, Tabs, Cards, Avatars, Modals, Skeletons, Circular Progress, and even create a sleek Navbar. These hands-on Answers will help you master the essentials and design beautiful, functional web apps.