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/styled

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.

npm install @fontsource/roboto

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 tag:

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

<CssVarsProvider>
  <Button variant="filled">Button</Button>
</CssVarsProvider>

<CssVarsProvider>
  <Button variant="filled">Button</Button>
</CssVarsProvider>

Press Enter to start editing

Theming

Use the extendTheme function to modify the default theme. The theme structure follows M3 specifications. For example, if you wanted to modify the primary color, you would provide the color tones via ref.palette.primary:

<CssVarsProvider theme={customTheme}>
  <Button color="primary" variant="filled">
    Button
  </Button>
</CssVarsProvider>

<CssVarsProvider theme={customTheme}>
  <Button color="primary" variant="filled">
    Button
  </Button>
</CssVarsProvider>

Press Enter to start editing

Stable release

The stable release of the M3 components is tentatively targeted for Q4 2024 in Material UI v7. To follow the progress or contribute to the project, check out the M3 GitHub issue.