Material 3 Components

Try out Material UI's implementation of MD3 and learn how to contribute to the project.

Material 3

Material 3 (MD3), 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 2. MD3 implementation is a work in progress, targeted for completion in late 2024. You can try out Material UI's MD3 components as they're developed using the @mui/material-next package.

Supported components

Visit the All Components page to see which components support MD3—look for the green MD3 indicator. All components that have MD3 versions have a corresponding playground on their page. For example, here's the MD3 Button playground.

Getting started with MD3 components

The MD3 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 too:

"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;600;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 MD3 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 MD3 components is tentatively targeted for Q4 2024 in Material UI v7. To follow the progress or contribute to the project, check out the Material 3 GitHub issue.