Adopt Material Design 3 / Material You

[NawarA]

I'm sure you're tracking the pulse of material design standards like me and others. That being said, material ui version 3 is out.

We should track MUI being migrated from Material Design v2 to Material Design version v3.

I'm sure they'll be a few tickets that come out requesting the adoption, so I figured this ticket could act as a stub and catch-all for MUI support for the design language's latest update.

Cheers

References

• MD 3 Docs https://m3.material.io/
• MD 2 Docs https://m2.material.io/
• Ionic's discussion on the problem feat: Add Material Design 3 (Material You) support ionic-team/ionic-framework#24282
• Vuetify's discussion on the problem Material Design 3 (Material You) vuetifyjs/vuetify#14332
• Quasar's discussion on the problem Adopt Material Design 3 specs quasarframework/quasar#11139
• Google's discussion on the problem Implement Material You material-components/material-web#2441
• The docs traffic on MD 3 vs MD 2: https://www.similarweb.com/website/m3.material.io/?competitors=material.io
• Material Design traction on Figma MD 2 Figma file vs. MD 3 Figma file
  • January 12, 2022: MD2 4.8k stars 256k copies, MD3 1.9k stars 39.6k copies
  • March 24, 2022: MD2 5.6k stars 277k copies, MD3 4.2k stars 91k copies
  • August 23, 2022: MD2 6.5k stars 307k copies, MD3 5.8k stars 132k copies
  • October 6, 2022: MD2 6.8k stars 315k copies, MD3 6.6k stars 155k copies
  • December 20, 2022: MD2 7.2k stars 327k copies, MD3 8.9k stars 214k copies
• React Native Paper: Material Design 3 callstack/react-native-paper#3126
• Flutter Update text fields to support Material 3 flutter/flutter#103537
• Angular Material: feat(Material): Material You Support angular/components#22738

Design kits

• [figma] Add support for Material Design v3 mui-design-kits#135
• Material Design v3 mui-design-kits#103

Real adoptions of Material You in the wild?

Desktop

• https://relay.material.io/
• https://httpie.io/app feels inspired by it
• Gmail partially, which feels relatively yolo
• Others?

Mobile

• Google Pixel Phones. "Canalys puts Google fifth in U.S. phone market share, with just a 1.7% in Q3 2022." source. It's insignificant. All the other phone manufacturers skin Android, so don't use Material Design 3.
• Others?

Migration

If you wish to contribute, start with the contributing guide

Progress

List of components and their current migration status

✅ Done

• Badges: Playground | Issue | Specs
• Chips: Playground | Issue | Specs
• Circular Progress Indicator: Playground | Issue | Specs
• Common Buttons: Playground | Issue | Specs
• Dividers: Playground | Issue | Specs
• Linear Progress Indicator: Playground | Issue | Specs
• Sliders: Playground | Issue | Specs

⏳ In progress

• List: Issue | Specs
• Menu: Issue | Specs
• Select: Issue | Specs
• Snackbar: Issue | Specs
• Switch: Issue | Specs
• TextField: Issue | Specs
  • InputBase: [InputBase][material-next] Add InputBase component #38372
  • FormControl: [FormControl][material-next] Add FormControl component #38411
• Buttons
  • Button Group (named Segmented Button in the specs): Issue | Specs
  • Icon Button: Issue | Specs

⭐ Ready to take

• Bottom App Bar (Previously included in App Bar)
• Bottom Sheet (Previously included in Drawer)
• Buttons:
  • FAB
  • Extended FAB
• Card
• Dialog
• Navigation Bar (Previously named Bottom Navigation)
• Navigation Drawer (Previously included in Drawer)
• Navigation Rail (Previously Drawer “Mini” variant)
• Search (New component)
• Side sheet (Previously included in Drawer)
• Tab
• Top App Bar (Previously included in App Bar)
• Typography

✋🏼 On hold

• Blocked
  • Autocomplete: Issue | Specs
• Waiting for Base UI’s hook:
  • Checkbox
  • Radio Button
  • Tooltips

[cryptoAlgorithm]

Hi, I was about to start my own feature request, but found this. I think material v3 does look way more expressive and vivid than v2, and Google's own material web components is also in the progress of implementing Material You (material-components/material-web#2441).

If nobody wants to take up this task, I can plan and gradually migrate some mui components to material v3 standards. @mnajdova, is there anything blocking that needs to be completed before migration can start? If not, I think we can start with a checklist of components in order of importance and visual difference from material v2 -> v3.

[mnajdova]

Hi, if nobody wants to take up this task, I can plan and gradually migrate some mui components to material v3 standards. @mnajdova, is there anything blocking that needs to be completed before migration can start? If not, I think we can start with a checklist of components in order of importance and visual difference from material v2 -> v3.

It is a breaking change, so I am not sure that we can start with it right away (at least we cannot update the components which are part of @mui/material). We could try to adopt the styles to some of the components that we have inside @mui/material-next - this is our experimental package that depends on @mui/base that we envision will be the replacement for @mui/material v6. In my opinion this should be a good start. @mui-org/core what do you think?

@cryptoAlgorithm feel free to kick off this effort if you want to. Check first which components we already have in the @mui/material-next package and try to experiment with some of those if you want to.

[cryptoAlgorithm]

Ok, great. Maybe this can be introduced as part of the material-ui v6 update? Since by then, material v3 styles should be quite common across sites using material design. We might want to wait and see how Google handles this in their own Material Web Components library, and how they actually look.

[michaldudak]

We could try to adopt the styles to some of the components that we have inside @mui/material-next - this is our experimental package that depends on @mui/base that we envision will be the replacement for @mui/material v6. In my opinion this should be a good start. @mui-org/core what do you think?

Agree. Just note that material-next is our experimental (playground) package. We intend to test different shapes of the API there and introduce breaking changes without notice, so it's not safe to depend on it in production.

[aaronadamsCA]

It would be nice to somehow get early support for MD3 design tokens in advance of the rest.

The biggest leaps forward with MD3 compared to the design tokens available by default in MUI today are:

• New typographic tokens. The system (5 semantic choices × 3 sizes) is far more intuitive, the type scale is actually usable out of the box (MUI's built-in h1 is an insane 96px, whereas MD3 tops out at a much more reasonable 57px), and the responsive type sizing is improved (though I don't know if the tokens are actually available yet).

• New color tokens. The 0-100 tone system eliminates the co-dependence between your color palette and component tones, because luminance is normalized. If you choose primary[40] for a component, you're guaranteed to get a usable tone regardless of the chosen palette. This helps greatly with component contrast and accessibility; MUI's current info and warning colors, for instance, cause components to fail WCAG 2.0 AA, whereas a new info[40] color token would be guaranteed to pass.

Be warned that parts of MD3 are still half-baked; for example there's no saturation control during palette generation, so you can't choose whether you're getting super-pumped-up colors or pale tones. As a result, some resulting UI looks great on mobile but very oversaturated on desktop, because a "splash" of color suddenly becomes a large imposing block of color.

If MUI gets involved with MD3 sooner than later, though, then maybe there's actually an opportunity to help them make the right choices, like open-sourcing palette generation and adding saturation control.

[cryptoAlgorithm]

Ideally, MUI should (or start efforts to) adapt Material v3 as soon as possible since its the most popular react material library, and might give MUI a head start over potential competitors (including google's own library). Material v3 support would be quite enticing since I foresee the popularity of the new standard increasing after android 12 actually becomes mainstream, and people might be attracted to the library mainly for this reason.
I honestly don't think implementing the whole palette generation and color extraction functions are feasible, it should be left to the dev to implement such generation themselves. These will keep the dependancies and size of the library reasonable and not add additional unessential bloat that not everyone will use.

[oliviertassinari]

It's not clear to me that MD3 will have a lot of traction. I'm eager to wait for positive signals before committing to this effort. The context seems different in 2022 than it was in 2016. What I believe are facts:

1. Does MD3 look great like MD1 was when end-users had smaller screens with less resolution? Personally, it's a clear no and the same answer goes from @mbrookes.
   Before MD1 (v5 - Lollipop 🥰), it was looking ugly (v4.4 - Kit Kat 🙈) so an easy win. I think that it will take some customization effort from our end to make it appealing. My experience so far is that Google's UI usually looks better than what http://material.io/ ships.
2. Is the Google Pixel the only phone that really uses Android now? The large majority of the phones sold are based on a custom UI Samsung (One UI), Xiaomi (MIUI), OnePlus (OxygenOS).
3. Most of the Android apps I use now are no longer based on MD. It used to be a lot more popular, I recall. I feel that it was pushed on purpose by Google, to avoid brand dilution.
4. MD3 is currently targeted at mobile but most people use Material UI for desktop apps.

[cryptoAlgorithm]

I fully agree that the material standard would need to be slightly adapted to look great on desktop-sized websites/web apps, however it seems like the material v3 standard takes into consideration slightly larger screen sizes, like the navigation rail etc. Also, I think the standard google is showing at their reference site https://m3.material.io/ seems much better than the reference v2 site (not even google follows it 😆).

One interesting thing is they seem to already be using web components in the material v3 style for that website, which begs the question: why isn't there any big progress in their official material web components library?

[konhi]

why isn't there any big progress in their official material web components library?

@cryptoAlgorithm It doesn't seem to be documented nor in CI workflow (built), but you can see that there's work being done! If I will be able to use that code and check which components are ready to use, I will let know there. Meanwhile, I encourage everyone who's interested to check it by themselves.

What might be meaningful to this topic is that these components are written using Web Components API, which (I think) means that there's not going to be much work required to make React (or other UI library) wrapper.
From my reading, it seems to be a way to make design systems that are future-proof and not bound to any framework.

• https://ionic.io/resources/articles/burger-king-design-system
• https://youtu.be/cNbSlmCrozg
• https://stenciljs.com/

[NawarA]

I fully agree that the material standard would need to be slightly adapted to look great on desktop-sized websites/web apps, however it seems like the material v3 standard takes into consideration slightly larger screen sizes, like the navigation rail etc. Also, I think the standard google is showing at their reference site https://m3.material.io/ seems much better than the reference v2 site (not even google follows it 😆).

One interesting thing is they seem to already be using web components in the material v3 style for that website, which begs the question: why isn't there any big progress in their official material web components library?

I think Material v3 uses less components to do more things. For example, Chip use-cases have been expanded, and now, Cards are used to contain everything. To me, the design spec acts as a responsive framework for all screen sizes, from mobile first, to foldable devices, to 4k desktop monitors.

I've already implemented material v3 atop MUI v5...the main trick was follow their opacity rules to make cards and chips variants look and feel like the variants described in the specs. I like it by the way. Everyone who saw my app loved it too.

The big diff I see is that MUI will need to help developers create a triple color theme. From there, Cards have 3 variants and Chips have several variants too.

The question becomes, what does MUI do with the other components that are in material v2 spec but not in the v3 spec?

I say keep em, though have them follow v3 guidelines, from a theming perspective. This way devs have everything they need to build a bare-bones MV3 app (as seen on Material.io), and they get all the goodies that MUI v5/v6 has to offer.

[jpmtrabbold]

@NawarA any way that you would share your implementation of material v3 into mui v5?

[NawarA]

not sure how I'd go about merging with the MUI v5 repo.

From an implementation perspective, the main place to start is letting users create a 3-color theme.

From there, Cards and Chips are components that have variants. Each variant uses the 3-color theme, opacities, and hover effects to create the effects described in the v3 specs.

I have my triple color theme hard coded atop MUI v5 (as a separate namespace). From there, I created custom Card and Chip components that have variant as an input, and return the correct component design / behavior as an output.

I could create a repo that has this running as an example...though I'm not sure how to merge that into MUI v5...even though its built on MUI v5. Any guidance would be helpful

[mnajdova]

@NawarA we use the @mui/material-next package for experiments, you can find the source code in https://github.com/mui/material-ui/tree/master/packages/mui-material-next

Then people who are interested to try it, can give it a go.

[ZakAlbert]

Hello everyone.

I share with you my own implementation of the Material You theme in MUI using the createTheme function and the official google Material Color Utilities library to generate the dynamic theme.

Project Repo
Demo

I hope it is useful to you.

Default Light

Default Dark

Color System Light

Color System Dark

[acroyear]

I disagree that Samsung's theming is not acknowledging Material 3, but rather I'd point out that not everybody sticks to Samsung's apps exclusively. And Samsung does tend to adapt their own to the latest libraries from google (once they're published and tested), so usually a year or so out.

but in the meantime, Google's own apps will be adopting this. Whether or not they ever tie in the color theme to the primary color of the Samsung theme, I can't say. i wish they would, of course.

in my case, the idea that a "perfect" theme can be constructed from just 2 colors is very appealing - I have a music app where I like adapting the primary/secondary color as extracted from the album cover art. If the theme could automatically figure out that it needed light/dark text based on the colors, it would save me some very bug-prone calculations I currently have to do to implement that.

BUT I acknowledge that MD3 is all in Java (if it is released at all in source form) and so it isn't easy for an independent company to figure out the same algorithms they're now applying.

[acroyear]

I'm inclined to think MUI should look at the palette generation of beercss - even if it isn't perfect, it is still a start, a set of algorithms that can be tweaked. Hard to know exactly what it would take given that Google i don't think has formally published its algorithm (thus why i'm wondering if the Android source code really includes this aspect of Material 3 to be extracted). Again, I think the tougher problem for MUI users NOW is knowing and having to state if the FG color should be white or black depending on the rest of the context.

[ealexhaywood]

@acroyear The Material Foundation has some implementations of their algorithms + utilities for the MD3 color system here https://github.com/material-foundation/material-color-utilities

[fiorins]

The Material 3 components guide has been released: https://mui.com/material-ui/guides/material-3-components/

That link is broken

[DiegoAndai]

Hey, @fiorins! Yes, sorry for the inconvenience. The guide has been pulled down while we determine the best approach for delivering the Material 3 components in a backward-compatible way. We should have updates on this by June. It will take until June because right now we're focusing on the development of v6. But I'll comment on this issue as soon as possible.

[NawarA]

Not sure, if it's helpful to mention, but I overhauled our MUI5 to Material 3 manually.

I did it by

1. Creating a MUI 3 theme, and copying the palette into my theme.js file, which also imports Roboto-Flex, and sets up the MUI 3 typography variants (headline, display, title, body, label, etc), sets up the correct "shapes" (for border radiuses) and "motion" (for transitions).
2. I created each component by following the MUI 3 specs.
3. I used Box a lot, lol

The key is the theme is comprehensive, and your MUI 3 Component specs follow 1-to-1 with the MUI 3 specs. I also have a dark theme, which looks dope, but I dont currently have enabled on my site.

Here's my site for reference on MUI 5 easily migrated to MUI 3:

https://bytez.com/

[bpappin]

Lots of comments here about what kind of traction M3 will get , or if its too early for M3, so I'd like to just jump in here.
My own team/peers are exclusively M3 now, and have been for at least a year, plus some.

It's pretty important for us, that native and mui screens look at least somewhat similar.

FYI in native code, the M3 is almost a drop in replacement for the most part.
We simply use a Button, and depending on which version we are using under the covers, our UI will update.
We do need to import the right version of the components, but other than that, it just works.

[JasBogans]

Not sure, if it's helpful to mention, but I overhauled our MUI5 to Material 3 manually.

I did it by

1. Creating a MUI 3 theme, and copying the palette into my theme.js file, which also imports Roboto-Flex, and sets up the MUI 3 typography variants (headline, display, title, body, label, etc), sets up the correct "shapes" (for border radiuses) and "motion" (for transitions).
2. I created each component by following the MUI 3 specs.
3. I used Box a lot, lol

The key is the theme is comprehensive, and your MUI 3 Component specs follow 1-to-1 with the MUI 3 specs. I also have a dark theme, which looks dope, but I dont currently have enabled on my site.

Here's my site for reference on MUI 5 easily migrated to MUI 3:

https://bytez.com/

Can you share those components?

[NawarA]

Not sure, if it's helpful to mention, but I overhauled our MUI5 to Material 3 manually.
I did it by

1. Creating a MUI 3 theme, and copying the palette into my theme.js file, which also imports Roboto-Flex, and sets up the MUI 3 typography variants (headline, display, title, body, label, etc), sets up the correct "shapes" (for border radiuses) and "motion" (for transitions).
2. I created each component by following the MUI 3 specs.
3. I used Box a lot, lol

The key is the theme is comprehensive, and your MUI 3 Component specs follow 1-to-1 with the MUI 3 specs. I also have a dark theme, which looks dope, but I dont currently have enabled on my site.
Here's my site for reference on MUI 5 easily migrated to MUI 3:
https://bytez.com/

Can you share those components?

let me know which components you want, and i'll drop the Box + styling for those

[SaadBazaz]

We've built a component library for React which implements Material You / Material 3.

It also has additional components like Typography, Box etc with an API very similar to MUI, so it's relatively easy to migrate.

Would love to get this thread's feedback on it:
https://github.com/grayhatdevelopers/material-web-components-react

[BanDroid]

i'm also trying to create my own M3 customization on mui, i'm using only createTheme customization for compatibility issues, but welp, still on development on other components so the code maybe isn't written so well.

here's demo
https://material-ui-theme-teal.vercel.app

and here's my repo
https://github.com/BanDroid/material-ui-ts-theme

[mkendall07]

Is there an official timeline from MUI on when material 3 will be generally available? I see it's currently slated for 7.x but is that confirmed? Is there a timeline? Thanks!

[voi99]

any updates?

[DiegoAndai]

Hey everyone! Sorry for the delay.

In December 2023, we announced that we'd begin working on MD3 implementation after releasing Material UI v6. V6 was released last month, so the MD3 project is now underway.

As to why the version milestones and labels were changed: we didn't mean to change them so soon. We're still in the process of revising our internal and public roadmaps as we reevaluate the needs of the community post-v6.

We're also preparing an official announcement with complete details about what's next, so please stay tuned for more soon.

[TheOneTheOnlyJJ]

We're also preparing an official announcement with complete details about what's next, so please stay tuned for more soon.

Do you have an estimate for the official announcement release?

[DiegoAndai]

@TheOneTheOnlyJJ estimated time for the announcement is around the beginning of December.

[zohairhadi]

December has started... 👀

[Uddeshya08]

Hi team, I would love to contribute here, let me know the pending items to start with.

[DiegoAndai]

Hey everyone,

Thanks for your patience. We just published the 2024 review blog, briefly reviewing what this year has been: https://mui.com/blog/material-ui-2024-updates/.

In it, we cover Material Design 3. The bottom line is that, sadly, we won't deliver MD3 this year, as we previously thought. It won't happen in the first half of 2025, either. The main reason is that in the second half of 2024, the team has focused on supporting the v6 migration and support for the React 19 release.

I'm sorry to have everyone waiting for so long. I'm also personally regretful of having promised dates without delivering. I understand this can be frustrating. With 2024's priorities now completed, the design & aesthetics are our top priority. We're already working on it and will update you as soon as we have any information.

I hope you stay tuned. I appreciate your patience. I'm excited about what 2025 will bring. I hope you're too.

As always, feel free to reach out. From the Material UI team, we wish you great end-of-year celebrations 💙.

[lysy-krzys]

[like] Krzysztof Nikiforuk reacted to your message:

…

________________________________ From: Sharad Soni ***@***.***> Sent: Wednesday, December 18, 2024 5:18:00 AM To: mui/material-ui ***@***.***> Cc: Krzysztof Nikiforuk ***@***.***>; Manual ***@***.***> Subject: Re: [mui/material-ui] Adopt Material Design 3 / Material You (Issue #29345) ⚠ This email originates from outside the organization or the sender could not be verified. Hi @DiegoAndai<https://github.com/DiegoAndai>, Thank you for the update. However, I noticed a discrepancy in your statements. In this update, you mentioned there won’t be any news regarding M3 in the first half of the year. However, in your blog, it was stated that an update for M3 is expected in the first half of 2025. image.png (view on web)<https://github.com/user-attachments/assets/859a3b21-e995-4902-a9ad-fa1b8c4fbb7a> This is a bit confusing. First, there was the issue with the false date promise, and now there are two conflicting statements. Could you please clarify if we can actually expect any updates on M3 in the first half of 2025? Looking forward to your response. Best regards, Sharad — Reply to this email directly, view it on GitHub<#29345 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BATBS6A7KEKWY5DRFB2DR5D2GEAQRAVCNFSM5G3MCLTKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TENJVGAZTKOJUGA2A>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***> Please consider the environment before printing this e-mail.

________________________________ This e-mail (including any attachments) is intended solely for the use of the individual or entity to which it is addressed and may contain confidential information. This message is not a binding agreement and does not conclude an agreement without the express confirmation of the sender’s superior or a director of the company. If you are not the intended recipient, you should immediately notify the sender and delete the message along all the attachments. Any disclosure, copying, distribution or any other action is prohibited and may be illegal. No e-mail transmission can be guaranteed to be 100% secure or error-free, as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. Although Unravel has taken precautions to ensure that this e-mail is free from viruses, the company does not accept liability for any errors or omissions in the content of this message, which arise as a result of the e-mail transmission. This e-mail is deemed to be professional in nature. Unravel does not permit the employees to send emails which contravene provisions of the law.

[Wyn-Christian]

Looking forward for this migration

[mokosiy]

Can't wait to see it released!

[zju1]

It is 2025 and we are waiting for Material 3 )

[mokosiy]

It is 2025 and we are waiting for Material 3 )

Yeah, I know. Still, it was a big change from Material 2 to Material 3 (You). The former is reeeeally UX-outdated.

Hey, the MUI team, we do need you raise the priority of this task!

[zju1]

It is 2025 and we are waiting for Material 3 )

Yeah, I know. Still, it was a big change from Material 2 to Material 3 (You). The former is reeeeally UX-outdated.

Hey, the MUI team, we do need you raise the priority of this task!

Agree. We don't need performance improvements anymore. It is already fast and it is time to prioritize Material You.

[brian17han]

My enterprise project is currently halted pending the release of Material 3 for MUI, which was communicated as Q4 2024. This is a kind of blocker to moving this project forward into development. Please prioritize this. Thank you.