Installation
Install Material UI, the world’s most popular React UI framework.
Requirements
Material UI supports the latest, stable releases of all major browsers and platforms. It requires the following minimum versions:
- React 17.0.0 or later
- React DOM 17.0.0 or later
- TypeScript 4.1 or later (optional, but recommended)
- Node.js 14.0.0 or later
Default Installation
Install Material UI with your preferred package manager. Material UI uses Emotion as its default styling engine:
npm install @mui/material @emotion/react @emotion/styled
Peer Dependencies
The installation includes these packages:
- @mui/material: The core component library (v9.0.0-alpha.1)
- @emotion/react: CSS-in-JS library for styling (^11.5.0)
- @emotion/styled: Styled components API for Emotion (^11.3.0)
React and ReactDOM are peer dependencies and must be installed separately if not already in your project.
Installing Icons
Material UI includes over 2,000 Material Design icons. Install the icons package separately:
npm install @mui/icons-material
Using Icons
Import and use icons as React components:
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import SaveIcon from '@mui/icons-material/Save';
function MyComponent() {
return (
<>
<DeleteIcon />
<SendIcon color="primary" />
<SaveIcon fontSize="large" />
</>
);
}
TypeScript Setup
Material UI has comprehensive TypeScript support. Install type definitions for React:
npm install --save-dev @types/react @types/react-dom
import Button from '@mui/material/Button';
import type { ButtonProps } from '@mui/material/Button';
// Full IntelliSense support
const MyButton = (props: ButtonProps) => {
return (
<Button
variant="contained" // 'text' | 'outlined' | 'contained'
color="primary" // 'inherit' | 'primary' | 'secondary' | ...
size="medium" // 'small' | 'medium' | 'large'
{...props}
/>
);
};
Framework Integration
Material UI works seamlessly with popular React frameworks.
Next.js
For Next.js App Router (13+), install the Next.js integration package:
npm install @mui/material-nextjs @emotion/cache
Vite
Material UI works out of the box with Vite. Install the Vite React plugin:
npm install --save-dev @vitejs/plugin-react
Create React App
Material UI is fully compatible with Create React App. No additional configuration needed after installing the core packages.
Alternative Styling Solutions
Styled-Components
To use styled-components instead of Emotion:
npm install @mui/material @mui/styled-engine-sc styled-components
Zero-Runtime CSS (Experimental)
For static CSS extraction with Pigment CSS:
npm install @mui/material @mui/material-pigment-css
CDN Installation
For quick prototyping, you can load Material UI via CDN:
<!-- Material UI and dependencies -->
<script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>
<!-- Roboto Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
CDN installation is not recommended for production. Use a package manager for better performance and tree-shaking.
Roboto Font
Material UI uses the Roboto font by default. Add it to your project:
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
npm install @fontsource/roboto
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
Next Steps
Quick Start Tutorial
Build your first Material UI component in under 5 minutes