Installation
Install Material UI, the world's most popular React UI framework.
Last updated
Install Material UI, the world's most popular React UI framework.
Last updated
Default installation
Run one of the following commands to add Material UI to your project:
Please note that and are peer dependencies, meaning you should ensure they are installed before installing Material UI.
Material UI uses as its default styling engine. If you want to use instead, run one of the following commands:
npmyarnpnpm
Next, follow the to properly configure your bundler to support @mui/styled-engine-sc.
As of late 2021, 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 for more details.
We strongly recommend using Emotion for SSR projects.
npmyarnpnpm
Then you can import it in your entry point like this:
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.
To install Roboto through the Google Web Fonts CDN, add the following code inside your project's <head /> tag:
npmyarnpnpm
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:
We do not recommend using this approach in production. It requires the client to download the entire library—regardless of which components are actually used—which negatively impacts performance and bandwidth utilization.
Two Universal Module Definition (UMD) files are provided:
Material UI uses the font by default. Add it to your project via Fontsource, or with the Google Fonts CDN.
To use the or the prebuilt SVG Material Icons (such as those found in the ), you must first install the font. You can do so with npm, or with the Google Web Fonts CDN.
To use the font Icon component, you must first add the font. Here are on how to do so. For instance, via Google Web Fonts:
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 to get started.
one for development:
one for production:
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 .