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 @emotion/react @emotion/styledWith 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-componentsNext, follow the styled-components how-to guide to properly configure your bundler to support @mui/styled-engine-sc.
Peer dependencies
Please note that react and react-dom are peer dependencies too:
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
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/robotoThen 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
<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;600;700&display=swap"
/>
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 with the Google Web Fonts CDN.