Installation - Material UISkip to contentMUI CoreMaterial UIv5.11.1Diamond SponsorsGetting startedOverviewInstallationUsageExample projectsTemplatesLearnDesign resourcesFAQsSupported componentsSupported platformsSupportComponentsComponent APICustomizationHow To GuidesExperimental APIsDiscover moreMigrationTemplatesContentsDefault installationnpmyarnWith styled-componentsnpmyarnPeer dependenciesRoboto fontnpmyarnGoogle Web FontsIconsnpmyarnGoogle Web FontsCDNEdit this page
InstallationInstall Material UI, the world's most popular React UI framework.
Default installationRun one of the following commands to add Material UI to your project:
npmnpm install @mui/material @emotion/react @emotion/styled
Copy (or $keyC)
yarnyarn add @mui/material @emotion/react @emotion/styled
Copy (or $keyC)
With styled-componentsMaterial UI uses Emotion as its default styling engine.
If you want to use styled-components instead, run one of the following commands:
npmnpm install @mui/material @mui/styled-engine-sc styled-components
Copy (or $keyC)
yarnyarn add @mui/material @mui/styled-engine-sc styled-components
Copy (or $keyC)
Visit the Styled engine guide for more information about how to configure styled-components.
Peer dependencies
react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies.
Roboto fontMaterial 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.
npmnpm install @fontsource/roboto
Copy (or $keyC)
yarnyarn add @fontsource/roboto
Copy (or $keyC)
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';
Copy (or $keyC)
Fontsource can be configured to load specific subsets, weights and styles. Material UI's default typography configuration relies only on the 300, 400, 500, and 700 font weights.
Google Web FontsTo install the Roboto font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's <head /> tag:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
Copy (or $keyC)
IconsTo 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.
npmnpm install @mui/icons-material
Copy (or $keyC)
yarnyarn add @mui/icons-material
Copy (or $keyC)
Google Web FontsTo 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"
/>
Copy (or $keyC)
CDNYou 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.
We do not recommend using this approach in production.
It requires the client to download the entire library鈥攔egardless of which components are actually used鈥攚hich negatively impacts performance and bandwidth utilization.
Two Universal Module Definition (UMD) files are provided:
one for development: https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
one for production: https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js
The UMD links use the latest tag to point to the latest version of the library.
This pointer is unstable and subject to change as we release new versions.
You should consider pointing to a specific version, such as v5.0.0.