How to Install Material UI in Your React Project

Material UI is a great choice when you’re building a React project and want to make it look better with pre-built components. But my first experience with it was hardly satisfactory. When I first started installing Material UI in a React project, I thought it would be simple, as they said it was easier for React developers. Surprisingly, I was mistaken when I ran the first command in my terminal. There were many warnings and errors, and I wondered, “What did I miss? Have I got the wrong Node or React versions?”

The documentation seemed overwhelming, with lots of information to process. So I Googled the errors and went down a bundle of Stack Overflow threads. After spending quality hours, I started to figure out things like the peer dependencies, npm packages, and other extra installations needed to enjoy the Material UI in the React project. Eventually, I got comfortable with how things fit together.  

This small, annoying experience inspired me to write about how to install Material UI simply. In this blog, I’ll show you an easy step-by-step guideline on installing Material UI in your React project. You might not face the same problems as me, but if you do, it will be like your personal assistant.

Prerequisites for Installing Material UI in React

Material UI was introduced to facilitate React developers with a built-in component library and enhance their developer experience. It depends on React to render its components, so React should be installed first, and then you can install Material UI on top of it. 

The compatible versions of React and React-DOM are the first prerequisite to work with Material UI, as they are its peer dependencies.

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

The minimum React version to support Material UI packages working as expected is v17.0.0. If your React version is less than that, you should update it first. Use the following to update your project:

npm install react@<version> react-dom@<version>
// replace the <version> with the one you want; ex: npm install react@17 react-dom@17

Note: Install the same version for React and React-DOM. If not, you may get unexpected behavior in your application.

Along with this, you can also check the following requisites:

• Basic knowledge of working with Material UI.
• Node.js must be installed.
• Knowledge of creating a React application.
• Code editor (VS Code, Sublime Text, Jupyter Notebook, etc.)

Once everything is checked, we’re ready to start the installation process and enjoy the magic of Material UI. Let’s get started!

Step-1: Create a React Application

The first step of installing Material UI for a React project is to create a React application if you don’t have one yet. Creating a React project using Vite offers a smooth and clean setup without a framework. You can do this easily by following some simple steps using your terminal. Use any terminal like PowerShell, Command Prompt, or VS Code. After opening the terminal, run the following commands:

First, create a new Vite project using this command:

npm create vite@latest

Next, it’ll ask for a project name, a framework, and a variant name. Add the project name as you want and select the framework to React for building the React project. If you want to use typescript in your project, you can choose ‘Typescript’ in the variant section. 

Once the Vite project is ready, run this command to navigate it to the project library:

cd react-app

Lastly, install the necessary dependencies and start the development server:

npm install 
npm run dev

After running these commands, you’ll see a message on your terminal with a random port number like ‘http://localhost:5173/’. Open your browser and visit this URL. It will launch your React app with Vite in the browser, enabling you to proceed.

Congrats! Your application has been successfully created and is running perfectly. Now you are all set to move on to the next step, adding Material UI to your project.

Step-2: Install Material UI in React Project

The default Material UI installation includes 3 types of commands through 3 different package managers: npm (Node Package Manager), pnpm (Performant Node Package Manager), and yarn.  

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

//with pnpm
pnpm add @mui/material @emotion/react @emotion/styled

//with yarn
yarn add @mui/material @emotion/react @emotion/styled

You can install the Material UI by typing any of these commands into your terminal. I’ve used the first command with npm, as pnpm and yarn are the alternatives to npm. 

Here’s what the command includes:  

@mui/material: This is the main package for Material UI components.

@emotion/react and @emotion/styled: These are needed for styling, as Material UI uses Emotion as the styling engine for styling and customizing the components.

Once the command finishes, Material UI is installed and added to your project. You can look at the package.json file to see a list of all the installed packages and dependencies.

Material UI gives you a library of styled components you can use immediately. But sometimes we need to change some parts to fit our design needs. For instance, we might need to add icons or change the styling of some of the components. So, let’s look at some additional steps to ensure our installations are complete and ready to use Material UI.

Styled Components

Though Emotion is the default styling engine in MUI, we use styled-components in our React project sometimes. To install styled-components, run the following command:

npm install @mui/material @mui/styled-engine-sc styled-components

Adding Icons

When working on MUI projects, we use different icons for our design. Material UI offers a diverse icon set along with other components. To install this:

npm install @mui/icons-material

Step-3: Utilizing Material UI Components

After installing everything, you can use Material UI components in your project by importing them. Here’s an example of how to use a Material UI Button:

import { Button } from '@mui/material';

function App() {
  return (
    <div className="App">
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </div>
  );
}

export default App;

This will display a blue, clickable button that says “Click Me.” Similarly, you can experiment with other Material UI components like TextField, Card, or Grid.

Let’s look at the example below:

Here I’ve used a card component with the button component from above.

Finally, you’ve successfully installed Material UI in your React project, and now you can start building beautiful projects with functional UI components. 

The best thing about working with Material UI is that it saves time and effort on styling by offering a collection of pre-designed, customizable components, so you do not have to start from scratch. Additionally, it provides some easy customization techniques without blemishing the consistency. So, you can always use themes and styling choices to make it your own.

You can also get a better insight about Material UI by checking out some frequently asked questions.

Happy coding!