Installation
Edit this page

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

// with yarn
yarn add @material-ui/core

Please note that react >= 16.3.0 and react-dom >= 16.3.0 are peer dependencies.

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">

Alternatively, if you are using JSX over HTML to render the head:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />

Font Icons

In order 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">

Alternatively, if you are using JSX over HTML to render the head:

<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 component demos you must first install the @material-ui/icons package:

npm install @material-ui/icons

CDN

You can start using Material-UI with minimal Front-end infrastructure, which is great for prototyping. We discourage using this approach in production though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilisation.

UMD releases

We are providing two Universal Module Definition (UMD) files:

You can follow this CDN example to quickly get started.