If you have stumbled out of the gate when starting a new project or have thought about finding a component library for React, let me introduce you to Material-UI!
I have worked with Material-UI for a few years now and it has been a huge help in many ways. Here's six reasons why I think you will love it!
1️⃣ Start off with a large library of components
This reason alone has me recommending Material-UI to those looking to start a new React project. This is especially helpful if you're working under a strict time constraint and can't spend time building each component from the ground up. Having the ability to install the package and then have access to usable components from an App Bar to Drawers without any effort makes this library incredibly powerful. There have been many times I have come up with a high level design concept and quickly used Material-UI to throw together a working prototype in little time which to me is a huge selling point.
2️⃣ Aligns with Material Design by Google
As the name suggests, Material-UI aligns with Material Design by Google out of the box. Because of this, you are given a library of components that will probably look and feel familiar to your user base. This allows you to get started working with the library quickly while spending minimal time styling components and tinkering with CSS. With Material Design, you're given a full design system that describes the intent of the many available components and examples for how they should be utilized throughout your design.
Not only are you given a library already aligning with Material Design, but you're given access to the Material Icons as well. This means a uniform set of icons to choose from that match the design system being used. Additionally, there's support for a growing collection of even more Material Design icons in a separate package called Material Design Icons!
3️⃣ Access to a fully customizable theme
The nice thing about using a fully connected component library? You are given a customizable theme that can be accessed globally throughout your components. The theme gives you access to specify the color of components, surface properties (such as elevation and light/dark mode), palette information, etc.
All of this means that you can provide greater consistency among the many components you use throughout your design. The possibilities of how you style components and the interface really is endless. There's a TON to unpack here, so I suggest checking out their theming page!
4️⃣ Extensive support for issues and bugs
This is one point that I have really enjoyed about using Material-UI. The library is regularly updated with bug fixes and additional features. Since my introduction to using the library, the team has released new major versions once per calendar year packed with new features and components. Additionally, throughout the year there are minor releases packed with bug fixes and additional features for their component libraries. Their releases are all well documented and the history of the releases is available on their site. This means that you don't have to worry about being left behind if you opt to wait on updating your packages.
Another cool aspect of working with Material-UI is the "lab". The lab is a separate package where the Material-UI team can release new components for developers to use and test out without breaking the core package. This allows developers to use the new components and provide feedback to the maintainers.
5️⃣ Regularly updated library
With the regularly updated library comes great support for issues and bugs from the Material-UI team. The team responds quickly to any issues and provides fixes in minor releases. This has been a huge plus for me while using the library.
Additionally, as a user you have influence on what could be introduced next to the library. On Twitter, the main account @MaterialUI asks for feedback on what users would like to be added to the library. Also, there is a yearly developer survey that is used to provide feedback to the maintainers on how users use the library and what could be improved!
6️⃣ Large community of users providing external support and examples
Another benefit of using Material-UI is that there is a large user base that provide additional support and examples. One of my favorite sites to visit for Material-UI inspiration is MUI Treasury. @siriwatknp has put together his own ecosystem of usable Material-UI components. This is super helpful for any inspiration you might have when trying to come up with a unique way to utilize Material-UI.
🚀 Enjoy!
Hopefully this helps you out if you have struggled with starting React projects from scratch or have been looking for a well supported React component library. Feel free to reach out to me in the comments or on Twitter (@kyleh919) with any questions you have!
Sources:
- Material-UI cover photo: https://cdn.filestackcontent.com/5yjLJYBrQ6EHpN9dK0ak
- Material-UI: https://material-ui.com
- Material Design: https://material.io
- Material Design Icons: https://materialdesignicons.com
- MUI Treasury: https://mui-treasury.com
Top comments (9)
I've been developing web based applications since the mid 90s. React + Redux + Material-UI is by far the single best combination for development I have ever experienced bar none.
Something, something... cold, dead hands.
I use material ui for all my projects except for one. The only problem I've seen is that the bubdle size is pretty big when using material ui, and that can be bad if you need to optimize your app performance.
Just started using MUI on a new project a few weeks ago and find the library a bit to verbose, end up with many MUI elements nested in each other. And also the unit testing with react-testing-library seemed a bit difficult, maybe I’m just too new to it.
Can you recommend sources which help to get better with testing and also in general?
Great article, thanks!
Yep agreed. Material ui is the defacto UI system to be used with React.
The @material-ui/lab is also fantastic for getting early access to new functionality.
Absolutely! It’s awesome to peek into what will soon be released and an opportunity to give some feedback on the components.
Was wondering, is it compatible with react native projects ? Is so much better than the libraries available for react native
Some comments may only be visible to logged-in visitors. Sign in to view all comments.