Installation

Install Material UI, the world's most popular React UI framework.

Default installation

Run one of the following commands to add Material UI to your project:

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

Peer dependencies

Please note that react and react-dom are peer dependencies, meaning you should ensure they are installed before installing Material UI.

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

With styled-components

Material UI uses Emotion as its default styling engine. If you want to use styled-components instead, run one of the following commands:

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

Next, follow the styled-components how-to guide to properly configure your bundler to support @mui/styled-engine-sc.

Roboto font

Material UI uses the Roboto font by default. Add it to your project via Fontsource, or with the Google Fonts CDN.

npm install @fontsource/roboto

Then you can import it in your entry point like this:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Google Web Fonts

To install Roboto through the Google Web Fonts CDN, add the following code inside your project's <head /> tag:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

To use the font Icon component or the prebuilt SVG Material Icons (such as those found in the icon demos), you must first install the Material Icons font. You can do so with npm, or with the Google Web Fonts CDN.

npm install @mui/icons-material

Google Web Fonts

To install the Material Icons font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's <head /> tag:

To use the font Icon component, you must first add the Material Icons font. Here are some instructions on how to do so. For instance, via Google Web Fonts:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

CDN

You can start using Material UI right away with minimal front-end infrastructure by installing it via CDN, which is a great option for rapid prototyping.

Follow this CDN example to get started.