Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

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

<span class="token function">npm</span> <span class="token function">install</span> @mui/material @emotion/react @emotion/styled

yarn

<span class="token function">yarn</span> <span class="token function">add</span> @mui/material @emotion/react @emotion/styled

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

<span class="token function">npm</span> <span class="token function">install</span> @mui/material @mui/styled-engine-sc styled-components

yarn

<span class="token function">yarn</span> <span class="token function">add</span> @mui/material @mui/styled-engine-sc styled-components

Peer dependencies

Please note that react and react-dom are peer dependencies too:

<span class="token property">"peerDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">"react"</span><span class="token operator">:</span> <span class="token string">"^17.0.0 || ^18.0.0"</span><span class="token punctuation">,</span>
  <span class="token property">"react-dom"</span><span class="token operator">:</span> <span class="token string">"^17.0.0 || ^18.0.0"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

Roboto font

Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Google Fonts CDN.

npm

<span class="token function">npm</span> <span class="token function">install</span> @fontsource/roboto

yarn

<span class="token function">yarn</span> <span class="token function">add</span> @fontsource/roboto

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

<span class="token keyword">import</span> <span class="token string">'@fontsource/roboto/300.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'@fontsource/roboto/400.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'@fontsource/roboto/500.css'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'@fontsource/roboto/700.css'</span><span class="token punctuation">;</span>

Google Web Fonts

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

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>

Icons

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 yarn, or with the Google Web Fonts CDN.

npm

<span class="token function">npm</span> <span class="token function">install</span> @mui/icons-material

yarn

<span class="token function">yarn</span> <span class="token function">add</span> @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:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span>
  <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
  <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com/icon?family=Material+Icons<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>

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.

Two Universal Module Definition (UMD) files are provided: