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:
Peer 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.
Then 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.