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 MD 3 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 MD 3 looks great like MD 1 was when end-users had smaller screens with less resolution? Personally, it's a clear no and the same answer goes from @mbrookes.
   Before MD 1 (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 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. MD 3 is currently targeted at mobile but most people use MUI 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

[DiegoAndai]

I wonder if md3 styles are going to be applied and md2 styles removed in the next major version.

As the 2024 release plan announcement mentions, Material 3 (MD3) is not planned for the next major version, v6, but the one after that, v7.

For people relying on Material 2 (MD2) styles: When the components with MD3 design are released, there will be a smooth transition path from MD2 to MD3. It's too early to know what that transition would look like, but it's a requirement.

[Jack-Works]

For people relying on Material 2 (MD2) styles: When the components with MD3 design are released, there will be a smooth transition path from MD2 to MD3. It's too early to know what that transition would look like, but it's a requirement.

I'm worried about if md2 is removed. Our theme has modified the style a lot so it does not look like md2 (but override styles are based on md2), if we have to rewrite (or test everything) based on md3 to keep it looking the same as what we have today, it will be harder for us to migrate.

[DiegoAndai]

I'm worried about if md2 is removed. Our theme has modified the style a lot so it does not look like md2 (but override styles are based on md2), if we have to rewrite (or test everything) based on md3 to keep it looking the same as what we have today, it will be harder for us to migrate.

Don't worry. This exact case is what I was referring to with "there will be a smooth transition path from MD2 to MD3". Whenever I have more detail on how that transition would look like, I'll post it here. We know there are a lot of projects with customized styles over MD2, and we look to provide the best upgrade experience to those projects.

[DiegoAndai]

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

[JoseVSeb]

I just checked out the @mui/material-next package and noticed something. the CSS tokens used don't appear to follow M3 guidelines fully. Like the tokens generated by https://material-foundation.github.io/material-theme-builder/ and https://github.com/material-foundation/material-color-utilities are completely kebab-cased (like --md-sys-color-on-primary) but @mui/material-next appear to have the last part camel-cased (like --md-sys-color-onPrimary).
Is this something overlooked or am I missing something? Just saying coz, it would be great if all the libraries using M3 followed it completely (like https://github.com/material-components/material-web) so that they could be drop-in replaced easily and not worry about matching themes.

[DiegoAndai]

Hey @JoseVSeb. Indeed, there's inconsistency. I created an issue (#41136) to review it before the stable release. Thanks for the feedback! 😊

[arunmmanoharan]

Will there be an ESM release?

[DiegoAndai]

Hey @arunmmanoharan. All of our packages support ESM, including material-next. When the Material Design 3 components are released in their stable version, they will also support ESM.

We're also working on improving the ESM support for v6: #30671

[singerbj]

I scrolled through the comments here and didn't see anything on this - what would adopting material 3 design mean for support of material 2 in future versions of mui?

[DiegoAndai]

Hey @singerbj, thanks for reaching out!

what would adopting material 3 design mean for support of material 2 in future versions

It has yet to be decided. I expect to have a decision by the end of Q2 of this year.

I want to take the opportunity to ask you or anyone else interested: How do you think we should handle Material Design 2 moving forward? The community's input on this is essential.

[JoseVSeb]

I want to take the opportunity to ask you or anyone else interested: How do you think we should handle Material Design 2 moving forward? The community's input on this is essential.

I'd prefer separate npm packages. MD 2 as legacy maybe.

[o-alexandrov]

I want to take the opportunity to ask you or anyone else interested: How do you think we should handle Material Design 2 moving forward? The community's input on this is essential.

@DiegoAndai wasn't it already decided in this discussion thread? (link to MUI maintainer's comment)

[DiegoAndai]

@o-alexandrov, thanks for linking this. Honestly, I wasn't aware of it. It has valuable insights. The community leans towards separate packages and smaller bundle sizes. Having a legacy Material Design 2 package makes sense as an option.

[singerbj]

@o-alexandrov, thanks for linking this. Honestly, I wasn't aware of it. It has valuable insights. The community leans towards separate packages and smaller bundle sizes. Having a legacy Material Design 2 package makes sense as an option.

This makes sense to me and will be relatively easy to adapt our company's design system to use the MD2 packages if we need them.

As Material Design goes through its versions in the future, Is there any direction on whether old versions of the design that are made into legacy packages will become deprecated? Are users expected to be on the latest version of the designs to ensure they are getting the proper security/accessibility/defect fixes/updates? Or will all design versions be maintained going forward?

Basically I am wondering if my company needs to plan to switch to material design 3 components at some point in the future.

[DiegoAndai]

Basically I am wondering if my company needs to plan to switch to material design 3 components at some point in the future.

My answer would be essentially the same: It still needs to be decided. The "legacy" package is an option, but I don't know whether that package would be maintained or deprecated and eventually removed. I can say that we want to provide the best experience for current users so they can continue shipping their apps with as little friction as possible.

Your feedback (and anyone in a similar situation) is key to coming up with the best solution. If you could answer these questions, that would be great:

• How did you customize the components?
• How much customization does your app have? Is it closer to a custom design system, or is it closer to a Material Design 2 look?
• If it's closer or exactly a Material Design 2 look, are you (or your team) okay with it? Or do you have plans to move to a custom look? Or moving away from Material Design?
• What are your (or your team's) opinions on Material Design 3? Would you like or be willing to adopt it?

Feel free to reply in a comment. If anyone is willing, we can also schedule a call to discuss these questions. If you're interested, please reach out to diego@mui.com. This would be very helpful in determining the best path forward.

I'm sorry I don't have any more information at the moment. We're working on getting v6 ready, but soon, we will begin planning v7 and how to deal with Material Design's different versions.

[singerbj]

Makes sense! Just want to get as much information as possible. It still feels "early" to me, but I will note down your email in case we do wish to reach out directly! Thanks!

Here's some answers to your questions:

How did you customize the components?

We don't have many customizations at all actually, we mainly "forward" the components on in our own package. We set it up this way with the idea that if we did want to customize anything, we could. One thing we did do was limit the exposure of the documentation of props for each component to ensure that devs use the components properly - but thats more of a docs thing that a component thing.

How much customization does your app have? Is it closer to a custom design system, or is it closer to a Material Design 2 look?

It is almost exactly a MD2 look with some minor modifications basically all modified via a theme.

If it's closer or exactly a Material Design 2 look, are you (or your team) okay with it? Or do you have plans to move to a custom look? Or moving away from Material Design?
What are your (or your team's) opinions on Material Design 3? Would you like or be willing to adopt it?

Not sure on either of these yet. We as the "UX Dev Team" focus mainly on maintaining our library and design system docs and are guided by our UX design team on decisions like this. A big change might be detrimental to our company efforts of UX alignment, but I could also see our design team not wanting to get stuck in the past. There are some complexities too, one being that we recently introduced a complimentary angular library based on angular-material. I will have to discuss further with our greater UX team - I planned to anyway, I just happened to start here to gather information :)

[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

[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?

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

Thank you so much! I really liked the navbar (both mobile and web versions), as well as the animation in the search bar. What impressed me the most was the bottom sheet in the chatbot!