# Installation
Default installation
Run one of the following commands to add Material UI to your project:
```bash
npm install @mui/material @emotion/react @emotion/styled
```
#### Peer dependencies
Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies, meaning you should ensure they are installed before installing Material UI.
```json
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
```
### With styled-components
Material UI uses [Emotion](https://emotion.sh/docs/introduction) as its default styling engine. If you want to use [styled-components](https://styled-components.com/) instead, run one of the following commands:
npmyarnpnpm
```bash
npm install @mui/material @mui/styled-engine-sc styled-components
```
Next, follow the [styled-components how-to guide](https://mui.com/material-ui/integrations/styled-components/) to properly configure your bundler to support `@mui/styled-engine-sc`.
As of late 2021, [styled-components](https://github.com/styled-components/styled-components) is **not compatible** with server-rendered Material UI projects. This is because `babel-plugin-styled-components` isn't able to work with the `styled()` utility inside `@mui` packages. See [this GitHub issue](https://github.com/mui/material-ui/issues/29742) for more details.
We **strongly recommend** using Emotion for SSR projects.
### Roboto font
Material UI uses the [Roboto](https://fonts.google.com/specimen/Roboto) font by default. Add it to your project via Fontsource, or with the Google Fonts CDN.
npmyarnpnpm
```bash
npm install @fontsource/roboto
```
Then you can import it in your entry point like this:
```tsx
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
```
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 Fonts
To install Roboto through the Google Web Fonts CDN, add the following code inside your project's ` ` tag:
```html