Whether you go gaga for Material Design or gag looking at it, the "card" or "paper" concept with a focus on surfaces and edges continues to be a popular and broadly applied application style.
Material-UI, the React component library based on Google Material Design, allows for faster and easier stylized web development. With basic React framework familiarity, you can build a deliciously material app with Material-UI, and its almost like cheating. Almost.
This MIT-licensed open source project is more than just parlor tricks though and can get deep quickly. But don't let me scare you! I recently built an app with Material-UI for the first time, and by the end I was delighted. Here are 5 things I appreciated about Material-UI:
1. It's well documented
The official documentation is organized and easily navigable. The library's popularity means you have access to tons of code examples on the web if the documentation is confusing. You can also head over to StackOverflow for technical Q&A from Material-UI devs and the core team.
2. Regular updates
With the recent release of Material-UI v4 (May of 2019) and blog posts with new features and future goals posted monthly, Material-UI doesn't look like its dying down anytime soon. Along with feature updates and improvements, here are the GitHub stats from the latest blog posted November 8th:
We have accepted 182 commits from 68 different contributors. We have changed 1,157 files with 31,312 additions and 9,771 deletions.
Cheers to that! 🙌🙌🙌
3. Consistent appearance
Okay, this is kind of cheating because its a library, so of course the appearance is going to be consistent. BUT Material-UI is a HUGE library, and the benefit is you have some choices.
Aesthetic preferences for Material Design aside, your web project has a high chance of retaining similarity in appearance and functions all throughout.
4. Creative freedom
You don't have to have a consistent appearance if you don't want to!
I know, I know - I just said that it creates a consistent appearance, but that's out of the box. As I hinted at earlier, there is actually quite a lot of depth to the Material-UI components and the developers encourage customization. Material-UI doesn't force Material Design style on you, it just offers it.
One delightful component was the ThemeProvider. Placed at the root of your app, you can change the colors, the typography and much more of all sub-Material-UI components! However, this is optional; Material-UI components come with a default theme. Code magic.
5. Components work in isolation
Material-UI components are self-supporting, and will only inject the styles they need to display. They don't rely on any global style-sheets such as normalize.css! You only want to use that super cool progress spinner? Grab it! Live your best life!
So there you have it! Go try it on for size if you haven't already.
There are some great resources for starting projects on the official website.
If you have played around with Material-UI or its part of your regular build, let me know what you liked or what surprised you!
Top comments (14)
I am not saying Material UI is not good, but it just makes everything the same, it is good but it is the same.
It is similar to the fluent Microsoft design or I don't know how it was called before, some people liked it I hated it .. but at the end it is the same.
Human Interface Guidelines however are just guidelines and at the end many apps look amazing but in a different way. You do use iOS right, and not Android ? :) And you like the apps more right ? :) I am scared if more and more people start using Material UI on the web.. the web will become beautiful but boring :(
Hey Nayden! I hear what you're saying. Aesthetic choices come and go. That's something I appreciate about the Material-UI components, because even though they have a Material appearance - it can easily be customized. Its the functionality of their components that really is exciting.
Thanks for chiming in!
Ps. Oh, I use android. :)
haha :) good one :)) especially the ps. ;)
I know that the fomponents for android can have a customized theme but not many people do that and I am not sure about the web as well ... for example material ui for angular is it easy customizable I will check ;) few years ago when everyone was using jqueryUI the jqueryUI had such an amazing themes and even some theme manager/editor but for material ui I dont think we are there yet
First of all, i like how android looks more than ios
Second of all, i agree with the "web'll looks boring" part, thats why i decided to design my own components for my next side projects
Matei the look of the OS sure, but the look of the apps... they just.. I dont know something is just missing even on the google apps.
The best looking apps are not material ui apps.. the material ui apps is like the old grey theme for windows it is nice it is amazing but thats it.
I guess it depends on personal preferance
How about Ant Design (Antd) ?
I had a need that my app could create dynamic tab components as a result of clicking corresponding item in the menu system. These tabs have to be closable too.
For that purpose when searching UI lib, I got to Antd and found an example of closable dynamic tabs. So I copied and modified the code so as to meet my requirement and it worked.
Thanks to that Antd example that also gives me a clue on how to apply similar way to React-Bootstrap tab component.
will use Material-UI in my next app, thanks for sharing :)
Let me know how it goes! :)
sure will let you know :)
I really like how materialize is so simple and easy to use! I was lucky to have received a theme kit from my internship which I use on my current apps 😄
Awesome! :D
There is one component of Material UI that proves to be helpful in my app, i.e Switch. Among other libraries I have tried, including Antd, that provide Switch component, only one by Material UI that works for me.
Yes very good, but if you just want to add a ClassName to a button it's not possilbe.