Need advice about which tool to choose?Ask the StackShare community!
Materialize vs Material-UI: What are the differences?
Materialize: A modern responsive front-end framework based on Material Design. A CSS Framework based on material design; Material-UI: React components for faster and easier web development. Build your own design system, or start with Material Design. React components for faster and easier web development. Build your own design system, or start with Material Design.
Materialize and Material-UI can be categorized as "Front-End Frameworks" tools.
"Google material design" is the primary reason why developers consider Materialize over the competitors, whereas "React" was stated as the key factor in picking Material-UI.
Materialize and Material-UI are both open source tools. It seems that Material-UI with 48.1K GitHub stars and 10.7K forks on GitHub has more adoption than Materialize with 36K GitHub stars and 4.79K GitHub forks.
According to the StackShare community, Material-UI has a broader approval, being mentioned in 67 company stacks & 77 developers stacks; compared to Materialize, which is listed in 46 company stacks and 53 developer stacks.
My React website is a simple 5-pager that attaches to a database to store and display registrations and other data. The user (small user base) can change any form elements, but I don't need theme-ing, though that would be fun for the user. reactstrap/react-bootstrap built on Bootstrap 4 sounds dated. I am familiar with reactstrap, but a friend said to try Material-UI. The thought of learning it is interesting, but somehow I think it might be overkill. So... reactstrap, react-bootstrap, or Material UI, which should I use?
MaterialUI may be overkill for such a simple project, you're right. So I'm recommending both tools in this StackShare form.
But if it's planned to increase the project, consider migrating it to MUI in advance. Among its pros I can name: - brilliant TS support - all popular use cases covered - well documented - backed by sponsors == will live and be maintained
I recommend Material-UI for a couple reasons. 1. It’s very easy to throw MUI into React. You can essentially just import the components you need in place of yours. Effectively, for a button, for example, you can swap out <button for MUI’s <Button and you can be done if that’s all you want. Looks great, no hassle, and they have simple guides to help you make good UI decisions on top of that. 2. It’s pretty up-to-date, and it has great docs. I use MUI all the time, and if I were doing a simple, small user-base app, I would definitely use it for the sake of convenience and speed of development.
I've used material UI and had great success with it on React projects. Semantic UI is also another great option https://semantic-ui.com/.
When you say its "overkill", I would think long term. I do a lot of small projects not only for the purpose of the project, but also for learning, future projects and to use professionaly. It's a long-term investment.
Material-UI looks great and is easy to use. Highly recommended, my favourite UI framework for React.
Chakra UI seems like the perfect fit in my opinion. It has a much powerful design system, all the necessary components and it is dead simple to learn. And pretty easy to customize too.
It's totally the design decision if you like to follow bootstrap design then you should go for reactstrap. But if you want to follow google material design then you should go for material ui.
Material-UI is the good choice for a small project. It's fast for development, maintenance, and is ready to use. It HaveMaterial-UI is the good choice for a small project. It's fast for development, maintenance, and is ready to use. Has an excellent documentation with pratic examples.
Much more modern in terms on support for css in js. But go for v5 not v4 as material-ui is going through a transition in term of its own implementation
Hi, I start building an admin dashboard with next.js and looking for a frontend framework ( components ready ). So I end up with Ant Design and Material-UI, but I never built a project with these two.
Here is a list of my requirements.
- Good documentation.
- easy CRUD ( date picker and date range picker bundled )
- built-in multi-lang feature or Great 3rd library support
- Admin dashboard template
- well code maintenance
Which is better for the long run?
I'm using both of them. But If you want to create admin dashboard, You should try AntDesign. They (Alibaba / Taobao) created a group of UI libaries to create admin dashboard. It's production ready. https://procomponents.ant.design/en-US/components/table https://pro.ant.design/docs/layout In my opinion, If you want to create a dashboard with mobile first / simple dashboard, you can choice material ui. otherwise, antdesign is better (if you want focus on desktop /tablet ui). Some of skeleton has built with material ui such as react-admin is good point to start. But if you want to create admin site with antdesign, I think you should build with umijs (it is alternative and compatible with nextjs and antd support directlly)
https://github.com/uber/baseweb I highly recommend you baseweb, it's easy and very customizable and also beautiful.
Bootstrap is useful for rapid prototyping using an existing design system. Since the design system can be used in standard HTML + Javascript and can be imported for free into a Figma project, it lowers the complexity of our mock-up creation and frontend styling, all while promoting consistency. We did not choose Material UI, because it does not have a free design system to import into Figma.
I replaced Bootstrap with Material-UI during the front-end UI development, because Material-UI adopts a component-based importing style, making it suit well in a "React programming style". This makes me comfortable when programming because I can treat importing UI components as other React components I define.
As our team will be building a web application, HTML5
and CSS3
are one of the standardized combinations to implement the structure and the styling of a webpage. Material-UI
comes with all sorts of predesigned web components such as buttons and dropdowns that will save us tons of development time. Since it is a component library designed for React, it suits our needs. However, we do acknowledge that predesigned components may sometimes cause pains especially when it comes to custom styling. To make our life even easier, we also adopted Tailwind CSS
. It is a CSS framework providing low-level utility classes that will act as building blocks when we create custom designs.
Fonts and typography are fun. Material Design is a framework (developed by Google) that basically geeks out on how to assemble your typographical elements together into a design language. If you're into fonts and typography, it's fantastic. It provides a theming engine, reusable components, and can pull different user interfaces together under a common design paradigm. I'd highly recommend looking into Borries Schwesinger's book "The Form Book" if you're going to be working with Material UI or are otherwise new to component design.
https://www.amazon.com/Form-Book-Creating-Printed-Online/dp/0500515085
Pros of Material-UI
- React136
- Material Design82
- Ui components58
- CSS framework28
- Component23
- Looks great14
- Good documentation11
- Responsive11
- LESS9
- Ui component7
- Open source7
- Code examples6
- Flexible5
- JSS4
- Angular3
- Very accessible3
- Fun3
- Supports old browsers out of the box3
- Interface2
- Designed for Server Side Rendering2
- Easy to work with1
- Css1
Pros of Materialize
- Google material design102
- Easy to use74
- Responsive74
- Modern looks54
- Open source48
- Good documentation42
- Code examples37
- Extremely light - 29kb29
- Flexible28
- Great Support15
- It looks beautiful10
- Very nice looking components to quickly build out8
- Smooth animation7
- Great Grid System6
- Great4
- Ruby gem to integrate in 2 seconds flat4
- Angular2 Support3
- MIT Lisence2
- Friendly api, easy setup, good documentation2
- Easy setup2
- React1
- Grid system1
- Because of the easy to use and very editable library1
- Responsivness1
- Jibberish1
- Friendly Api1
- Better class name0
- Rtl support0
Sign up to add or upvote prosMake informed product decisions
Cons of Material-UI
- Hard to learn. Bad documentation31
- Hard to customize25
- Hard to understand Docs19
- Bad performance6
- Extra library needed for date/time pickers6
- For editable table component need to use material-table5
Cons of Materialize
- Mobile errors7
- Poor Grid System6
- Unmaintained2