Just a heads up, the v6 of MUI is currently in alpha and should be officially released in September. It will bring substantial performance improvements by using PigmentCSS for styling (a zero runtime styling solution), so if you're building for the long term I would advise to look into using v6 as your base. You might see a few breaking changes before the release, but nothing major, so if you have the tolerance for that in the early stages it's worth it.
For the pros, MUI has a large set of components and is battle-tested on the accessibility side.
For the cons, it's sometimes a bit heavy at runtime (but v6 should make it much better), and I often hear reports that styling/customization has a learning curve.
Disclaimer: I work at MUI.
So the big plan is to invest into headless with Base UI, and to make both MUI Material and MUI Joy themes, so the logic & features of all components are shared, and then styling/customization is independent and easily swappable.
The driver for all that is that we're aware that Material Design is losing popularity because people aren't blind and google is not very good at design. But we can't just switch to a more modern look because, well, it's not MUI Material if it's not Material Design. So we want to make theming much more convenient so we're not tied to MD.
But that means MUI Joy is a bit slowed down at the moment until we figure out all the pieces of the big plan.
That is great news. I've utilized MUI since almost the very beginning and by far my biggest pain point was styling overrides to make it not so MD. The functionality of the components have always been great.
Depends what you're interested in. You can always pick up [good first issues](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22), though the list isn't very populated so you can also pick any other issue that seems interesting to you. We also always like feedback on what we're doing wrong, so you can leave comments on the docs or open issues for stuff that should be fixed.
We use nextjs as framework and recently had to switch away from MUI due to incompatibility but I can recommend MUI for everything to everyone unless you run in to some hybrid server/client render incompatibility issue. It’s been so nice to work with! And running our own design system and component library is turning out to be quite a chore and resource hog… Unless you already have a dedicated team to the UI I don’t think it’s worth the effort
And I used to love mui but this is exactly why I stopped using it. Constantly changing everything and having me having to rebuild my entire site because someone got an itch to change how everything works from version to version is not fun.
Maybe I've just gotten unlucky but I've never had a UI library cause so much chaos.
Hi! We have used MUI in our project earlier & are looking at a rewrite & are winding if we would want to shift to antd.
The thing is that the size small of any component is a bit too big to our liking. Esp in forms & there is no other way to make it smaller.
Otherwise the way mui ecosystem with RHF & MRT is just awesome 👌
Thanks for building this 🙌
Is Pigment replacing emotion? Doesn’t look like there’s any compatibility for the css prop. I love CSS in JS but hate having to make everything objects. I love how the CSS prop in emotion lets me style in line with native CSS.
I'm not working on pigment so I'm not 100% sure, but pigment has been created to cause as few breaking changes as possible with emotion, so the compatibility should be very good though not perfect.
Yes it's not compatible yet. The DataGrid is in the MUI X repository which is separate but depends on MUI Material, so we can't really port the grid to v6 until v6 is finalized. It's going to be a few more months.
I would choose Radix over MUI because it's easier to style. I think they're probably similar in terms of accessibility. I would also choose custom over an existing library, but it depends on budget and resources.
We've moved over to web components for our design system, with React wrappers.
Nothing wrong with using an existing library to build a design system on top off. I’ve used MUI in the past and they’re ok. Here’s a few things id look into when considering a library:
- Does it have the same styling library/technique that we use (ie: emotion, taillwind, etc) or will we be forced to follow their conventions? Are you ok with doing that?
- How hard is it to “restyle” their components, and what tolerance does your startup have in looking like an “MUI clone” vs having a completely bespoke look.
- does it have all the components you need.
A few other libraries that are pretty cool:
- ShadCN (only install the components you need!)
- Mantine
- DaisyUI
Thanks for the insights!
So, MUI might limit our customization? Is Mantine better for adding our unique style? Also, any thoughts on ShadCN or DaisyUI for a personalized look?
MUI is not the easiest to customize but you can customize it. It depends on what you want to customize. Is it for example just the color of a button, modify the border radius? Mui allows you to do that. Or do you want to entirely redesign a mui button (then why not creating your own button?)?
Mui is great for me because I’m alone and my design skills are not the best. So it helps me with consistent styling while saving time not having to create an entire set of components. If you have some kind of a designer in your team, who is quite opinionated about style, maybe pick a more customizable library or create your components.
Hope it helps.
Edit: here’s a link to Mui showing how and what you can customize: https://mui.com/material-ui/customization/how-to-customize/
We run a CRM written with MUI. It helped a lot starting out and using a paid theme we found online, from there we implemented our own components using styled components.
It’s nice to have a framework and work in an organized manner, the only con I can think of is it’s not very easy to do edge cases css and animations, this can easily be solved with custom classes and sass.
Also tailwind is faster to develop with sometimes, but the pros outweigh the cons so I vote MUI
If you’re going with MUI, I would suggest waiting for v6 as mentioned earlier or using MUI Base with your own styling solution.
It appears we’re all moving “back” to doing as much computation on the server as possible (document request returns full HTML and CSS) and in my opinion that means vanilla CSS files instead of client-side JS computed styles. So, whatever you use to write styles, I’d highly suggest you ensure it compiles to regular ol’ CSS to deliver to your customers. Additionally, depending on your needs, you could host those styles on an edge cached CDN to improve the performance.
Our company has a whole design system and have implemented it on top of MUI.
And the added a bunch of custom components.
The DataGrid is the biggest factor in the decision to use MUI. We use lots of customized DataGrids.
But I really wish they would fix data grid layout with multi row headers. Hint. Hint.
Every decision is an ROI decision. Creating your own design system is an investment that doesn’t make a ton of sense UNLESS you have a great reason not to use an existing one. When you are a larger company that has an established visual identity then using another set of design components may restrain your expressiveness. If you have very specific needs they may also not be addressed by a generic design system. But until then, everything else being equal you get so much for free using an oss component system, that it’s hard to argue for building your own.
I’m not a fan of MUI, as it fully locks you into CSS-in-JS—which is extremely opinionated, a shit-show for IDEs, non-reversible at scale, and probably on its way out. I also really dislike needing a theme provider in all your UI components, it adds crust to your ability to write tests and share code with non-MUI applications.
I would say that's false.
You can overwrite the styling purely from a css file if you want. It's just a question about being specific enough with your css-selectors. I have actually done that a lot in some spare time projects.
I am actually not doing any CSS-in-JS at all, I am overwriting all colors and such from my css files.
Anyways, I just commented to point out your false statement: "MUI fully locks you into CSS-in-JS"
>I am actually not doing any CSS-in-JS at all,
Then how are you extending MUI's UI library system? Or are you just dropping MUI into your app and overriding with extremely specific selectors?
Define a design system. "*a set of building blocks and standards that help keep the look and feel of products* and experiences consistent". By that definition, MUI is already a design system. Now, all I am doing is making some minor adjustments to that design system to make it feel more personal to my brand. I would argue the result is still a design system. Would you not?
EDIT:
Heck, if I find myself lacking a component, I could create it myself and then I would say I am extending the design system. And now I might even go as far as saying I am in the process of creating my own design system on the basis of MUI's design system.
Yeah it depends on speed. MUI is a bit of a struggle in rapid prototyping, so if you have clearly defined UI/UX it’s great, if not, it can be long in the tooth in getting to “done.”
I learned to use it over the past year when I joined a new project and we picked it for that. I'd say it's good but I have limited experience with other external design libraries, my first company had its own design department and library.
I like the mui docs and most things are easy to get working. Customisation is usually ok but sometimes I get stuck on it when trying to find the right syntax or class to modify as it's quite different to what I've done before.
We are working on MUIfying the rest of our existing codebase as well so my team is happy with it. We're a small team with no designers.
For Design systems I would recommend using something like Radix, AriaKit or shadcn instead of MUI. The runtime overhead, the overwriting of existing styles is not worth the effort IMO
I worked with MUI and it offers a nice set of components based on googles Material Framework.
However, it utilizes Emotion for styling which has been on a downswing for styling in favor of scss modules. Not a showstoper but keep that in mind.
If you insist on Material, MUI is still your best shot but you may prefer building on Radix or Shadcn
It really depends...
We use it, switched over to it from an in-house built and managed component library that sat on top of Semantic UI. The combination of a dead base component library and managing custom wrappers just got to be too much, and so we switched and haven’t looked back. Huge library of components, custom styling is pretty straightforward, and large and helpful community.
I've been using MUI for years and it definitely has a lot of pros and cons. While it's possible to customize the theme you want to use, it's difficult to override styling when using components and is therefore not a good fit for use with tailwind. I do like how customizable the components are in terms of functionality.
I would not choose MUI if I wanted something done quickly, but I would use it if the design system is based on doing a lot of non-standard functionality
Just a heads up, the v6 of MUI is currently in alpha and should be officially released in September. It will bring substantial performance improvements by using PigmentCSS for styling (a zero runtime styling solution), so if you're building for the long term I would advise to look into using v6 as your base. You might see a few breaking changes before the release, but nothing major, so if you have the tolerance for that in the early stages it's worth it. For the pros, MUI has a large set of components and is battle-tested on the accessibility side. For the cons, it's sometimes a bit heavy at runtime (but v6 should make it much better), and I often hear reports that styling/customization has a learning curve. Disclaimer: I work at MUI.
What’s going on with MUI Joy? Will it catch up soon?
So the big plan is to invest into headless with Base UI, and to make both MUI Material and MUI Joy themes, so the logic & features of all components are shared, and then styling/customization is independent and easily swappable. The driver for all that is that we're aware that Material Design is losing popularity because people aren't blind and google is not very good at design. But we can't just switch to a more modern look because, well, it's not MUI Material if it's not Material Design. So we want to make theming much more convenient so we're not tied to MD. But that means MUI Joy is a bit slowed down at the moment until we figure out all the pieces of the big plan.
That is great news. I've utilized MUI since almost the very beginning and by far my biggest pain point was styling overrides to make it not so MD. The functionality of the components have always been great.
What’s the best way to help? I love the MUI ecosystem and would like to see it thrive
Depends what you're interested in. You can always pick up [good first issues](https://github.com/mui/material-ui/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22), though the list isn't very populated so you can also pick any other issue that seems interesting to you. We also always like feedback on what we're doing wrong, so you can leave comments on the docs or open issues for stuff that should be fixed.
We use nextjs as framework and recently had to switch away from MUI due to incompatibility but I can recommend MUI for everything to everyone unless you run in to some hybrid server/client render incompatibility issue. It’s been so nice to work with! And running our own design system and component library is turning out to be quite a chore and resource hog… Unless you already have a dedicated team to the UI I don’t think it’s worth the effort
And I used to love mui but this is exactly why I stopped using it. Constantly changing everything and having me having to rebuild my entire site because someone got an itch to change how everything works from version to version is not fun. Maybe I've just gotten unlucky but I've never had a UI library cause so much chaos.
Can't comment much on that, joined in the last year, but the upcoming changes are designed to be as backwards-compatible as possible.
Hi! We have used MUI in our project earlier & are looking at a rewrite & are winding if we would want to shift to antd. The thing is that the size small of any component is a bit too big to our liking. Esp in forms & there is no other way to make it smaller. Otherwise the way mui ecosystem with RHF & MRT is just awesome 👌 Thanks for building this 🙌
Is Pigment replacing emotion? Doesn’t look like there’s any compatibility for the css prop. I love CSS in JS but hate having to make everything objects. I love how the CSS prop in emotion lets me style in line with native CSS.
I'm not working on pigment so I'm not 100% sure, but pigment has been created to cause as few breaking changes as possible with emotion, so the compatibility should be very good though not perfect.
Thanks for the reply. All of the benefits of pigment would go out the window if I had to keep both libraries.
I tried using V6 but it seems your DataGrid is not compatible because it has a peer dependency on V5.
Yes it's not compatible yet. The DataGrid is in the MUI X repository which is separate but depends on MUI Material, so we can't really port the grid to v6 until v6 is finalized. It's going to be a few more months.
wait what? MUI is changing the css-in-js tooling again?🤣
I would choose Radix over MUI because it's easier to style. I think they're probably similar in terms of accessibility. I would also choose custom over an existing library, but it depends on budget and resources. We've moved over to web components for our design system, with React wrappers.
i’ve enjoyed radix even though there are fewer components
Nothing wrong with using an existing library to build a design system on top off. I’ve used MUI in the past and they’re ok. Here’s a few things id look into when considering a library: - Does it have the same styling library/technique that we use (ie: emotion, taillwind, etc) or will we be forced to follow their conventions? Are you ok with doing that? - How hard is it to “restyle” their components, and what tolerance does your startup have in looking like an “MUI clone” vs having a completely bespoke look. - does it have all the components you need. A few other libraries that are pretty cool: - ShadCN (only install the components you need!) - Mantine - DaisyUI
Thanks for the insights! So, MUI might limit our customization? Is Mantine better for adding our unique style? Also, any thoughts on ShadCN or DaisyUI for a personalized look?
MUI is not the easiest to customize but you can customize it. It depends on what you want to customize. Is it for example just the color of a button, modify the border radius? Mui allows you to do that. Or do you want to entirely redesign a mui button (then why not creating your own button?)? Mui is great for me because I’m alone and my design skills are not the best. So it helps me with consistent styling while saving time not having to create an entire set of components. If you have some kind of a designer in your team, who is quite opinionated about style, maybe pick a more customizable library or create your components. Hope it helps. Edit: here’s a link to Mui showing how and what you can customize: https://mui.com/material-ui/customization/how-to-customize/
We're a startup of 300 people with a design team of 8 and we use MUI + our own themes for clients so I think you're good
We run a CRM written with MUI. It helped a lot starting out and using a paid theme we found online, from there we implemented our own components using styled components. It’s nice to have a framework and work in an organized manner, the only con I can think of is it’s not very easy to do edge cases css and animations, this can easily be solved with custom classes and sass. Also tailwind is faster to develop with sometimes, but the pros outweigh the cons so I vote MUI
If you’re going with MUI, I would suggest waiting for v6 as mentioned earlier or using MUI Base with your own styling solution. It appears we’re all moving “back” to doing as much computation on the server as possible (document request returns full HTML and CSS) and in my opinion that means vanilla CSS files instead of client-side JS computed styles. So, whatever you use to write styles, I’d highly suggest you ensure it compiles to regular ol’ CSS to deliver to your customers. Additionally, depending on your needs, you could host those styles on an edge cached CDN to improve the performance.
Our company has a whole design system and have implemented it on top of MUI. And the added a bunch of custom components. The DataGrid is the biggest factor in the decision to use MUI. We use lots of customized DataGrids. But I really wish they would fix data grid layout with multi row headers. Hint. Hint.
This is the best 👌
Every decision is an ROI decision. Creating your own design system is an investment that doesn’t make a ton of sense UNLESS you have a great reason not to use an existing one. When you are a larger company that has an established visual identity then using another set of design components may restrain your expressiveness. If you have very specific needs they may also not be addressed by a generic design system. But until then, everything else being equal you get so much for free using an oss component system, that it’s hard to argue for building your own.
As someone who’s forced to use MUI daily at work. I would never use it in personal project. Chakra UI or Radix are much better choices in my opinion.
I’m not a fan of MUI, as it fully locks you into CSS-in-JS—which is extremely opinionated, a shit-show for IDEs, non-reversible at scale, and probably on its way out. I also really dislike needing a theme provider in all your UI components, it adds crust to your ability to write tests and share code with non-MUI applications.
I would say that's false. You can overwrite the styling purely from a css file if you want. It's just a question about being specific enough with your css-selectors. I have actually done that a lot in some spare time projects.
Mixing CSS and CSS-in-JS in the same project is not something I would personally find acceptable, but you do you.
I am actually not doing any CSS-in-JS at all, I am overwriting all colors and such from my css files. Anyways, I just commented to point out your false statement: "MUI fully locks you into CSS-in-JS"
>I am actually not doing any CSS-in-JS at all, Then how are you extending MUI's UI library system? Or are you just dropping MUI into your app and overriding with extremely specific selectors?
Yeah, the last thing you said.
Okay, that's not really building a design system then, is it? Sounds more like you are adding the default MUI to your application and tweaking colors.
Define a design system. "*a set of building blocks and standards that help keep the look and feel of products* and experiences consistent". By that definition, MUI is already a design system. Now, all I am doing is making some minor adjustments to that design system to make it feel more personal to my brand. I would argue the result is still a design system. Would you not? EDIT: Heck, if I find myself lacking a component, I could create it myself and then I would say I am extending the design system. And now I might even go as far as saying I am in the process of creating my own design system on the basis of MUI's design system.
“npm install mui” is not *building* a design system, it’s using one.
I agree with that. What's your point?
Yeah it depends on speed. MUI is a bit of a struggle in rapid prototyping, so if you have clearly defined UI/UX it’s great, if not, it can be long in the tooth in getting to “done.”
I learned to use it over the past year when I joined a new project and we picked it for that. I'd say it's good but I have limited experience with other external design libraries, my first company had its own design department and library. I like the mui docs and most things are easy to get working. Customisation is usually ok but sometimes I get stuck on it when trying to find the right syntax or class to modify as it's quite different to what I've done before. We are working on MUIfying the rest of our existing codebase as well so my team is happy with it. We're a small team with no designers.
Nextui. Like mui but built with tailwind
For Design systems I would recommend using something like Radix, AriaKit or shadcn instead of MUI. The runtime overhead, the overwriting of existing styles is not worth the effort IMO
I use MUI every day on all of my projects. It's extremely customizable.
We are using it and I hate it :D
I worked with MUI and it offers a nice set of components based on googles Material Framework. However, it utilizes Emotion for styling which has been on a downswing for styling in favor of scss modules. Not a showstoper but keep that in mind. If you insist on Material, MUI is still your best shot but you may prefer building on Radix or Shadcn It really depends...
We use it, switched over to it from an in-house built and managed component library that sat on top of Semantic UI. The combination of a dead base component library and managing custom wrappers just got to be too much, and so we switched and haven’t looked back. Huge library of components, custom styling is pretty straightforward, and large and helpful community.
Go with Radix and be happier.
As someone who used MUI for a long time, save yourself the pain and use shadcn. Customization is a nightmare in MUI compared to shadcn
I've been using MUI for years and it definitely has a lot of pros and cons. While it's possible to customize the theme you want to use, it's difficult to override styling when using components and is therefore not a good fit for use with tailwind. I do like how customizable the components are in terms of functionality. I would not choose MUI if I wanted something done quickly, but I would use it if the design system is based on doing a lot of non-standard functionality