Material Design 3 Components
Try out Material UI's implementation of M3 and learn how to contribute to the project.
Material UI and M3
Material Design 3 (M3), also referred to as Material You, is the latest version of Google's design system.
The primary Material UI package (@mui/material) currently implements Material Design 2.
M3 implementation is a work in progress, targeted for completion in late 2024.
You can try out Material UI's M3 components as they're developed using the @mui/material-next package.
Supported components
Visit the All Components page to see which components support M3—look for the green M3 indicator. All components that have M3 versions have a corresponding playground on their page. For example, here's the M3 Button playground.
Getting started with M3 components
The M3 components are included in the @mui/material-next package.
The following guide explains how to get started using them.
Installation
Run one of the following commands to add @mui/material-next to your project:
npm install @mui/material-next @emotion/react @emotion/styledPeer dependencies
Please note that react and react-dom are peer dependencies, meaning you should ensure they are installed before installing the Material UI Next package.
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
Roboto font
Material UI uses the Roboto font by default. Add it to your project via Fontsource, or with the Google Fonts CDN.
npm install @fontsource/robotoThen you can import it in your entry point like this:
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
To install Roboto through the Google Web Fonts CDN, add the following code inside your project's
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
Usage
After installation, you can import any component from @mui/material-next just as you would do with the stable Material UI package.