Installation
Install Material-UI, the world's most popular React UI framework.
Material-UI is available as an npm package.
npm
To install and save in your package.json dependencies, run:
// with npm
npm install @material-ui/core@next @emotion/react @emotion/styled
// with yarn
yarn add @material-ui/core@next @emotion/react @emotion/styled
Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies.
Or if you want to use styled-components as a styling engine:
// with npm
npm install @material-ui/core@next @material-ui/styled-engine-sc@next styled-components
// with yarn
yarn add @material-ui/core@next @material-ui/styled-engine-sc@next styled-components
Take a look at the Styled Engine guide for more information about how to configure styled-components as the style engine.
Roboto Font
Material-UI was designed with the Roboto font in mind. So be sure to follow these instructions. For instance, via Google Web Fonts:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
Font Icons
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"
/>
SVG Icons
In order to use prebuilt SVG Material icons, such as those found in the icons demos you must first install the @material-ui/icons package:
// with npm
npm install @material-ui/icons
// with yarn
yarn add @material-ui/icons
CDN
You can start using Material-UI with minimal Front-end infrastructure, which is great for prototyping.
Two Universal Module Definition (UMD) files are provided:
- one for development: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- one for production: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
You can follow this CDN example to quickly get started.
⚠️ Using this approach in production is discouraged though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
⚠️ The UMD links are using the latest tag to point to the latest version of the library.
This pointer is unstable, it shifts as we release new versions.
You should consider pointing to a specific version, such as v4.4.0.
Design resources
A set of reusable components for design tools is available, designed to match the React components and to help you craft great products: