Install MUI, the world's most popular React UI framework.
MUI is available as an npm package.
To install and save in your
package.json dependencies, run:
// with npm npm install @mui/material @emotion/react @emotion/styled // with yarn yarn add @mui/material @emotion/react @emotion/styled
// with npm npm install @mui/material @mui/styled-engine-sc styled-components // with yarn yarn add @mui/material @mui/styled-engine-sc styled-components
💡 Take a look at the Styled Engine guide for more information about how to configure
styled-componentsas the style engine.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
// with npm npm install @mui/icons-material // with yarn yarn add @mui/icons-material
You can start using MUI with minimal Front-end infrastructure, which is great for prototyping.
Two Universal Module Definition (UMD) files are provided:
- one for development: https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
- one for production: https://unpkg.com/@mui/material@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 v5.0.0.
A set of reusable components for design tools is available, designed to match the React components and to help you craft great products:
- Figma: A large UI kit with over 600 handcrafted MUI components.
- Adobe XD: A large UI kit with over 600 handcrafted MUI components.
- Sketch: A large UI kit with over 600 handcrafted MUI symbols.
- UXPin: A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment.