Installation

<p class="description">Install MUI System, a collection of CSS utilities for rapidly laying out custom designs.</p>

Default installation

Run one of the following commands to add MUI System to your project:

bash

npm install @mui/system @emotion/react @emotion/styled

bash

pnpm add @mui/system @emotion/react @emotion/styled

bash

yarn add @mui/system @emotion/react @emotion/styled

</codeblock>

Peer dependencies

Please note that react is a peer dependency, meaning you should ensure it is installed before installing MUI System.

json

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

With styled-components

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

<codeblock storageKey="package-manager">

bash

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

bash

pnpm add @mui/system @mui/styled-engine-sc styled-components

bash

yarn add @mui/system @mui/styled-engine-sc styled-components

</codeblock>

:::error As of late 2021, 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 for more details.

We strongly recommend using Emotion for SSR projects. :::