Material Design for Angular vs Material-UI

Need advice about which tool to choose?Ask the StackShare community!

Material Design for Angular

8.1K
6.4K
+ 1
518
Material-UI

1.4K
2.7K
+ 1
356
Add tool

Material Design for Angular vs Material-UI: What are the differences?

What is Material Design for Angular? Material Design for AngularJS Apps. Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

What is 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.

Material Design for Angular and Material-UI can be categorized as "Front-End Frameworks" tools.

"Ui components" is the top reason why over 104 developers like Material Design for Angular, while over 51 developers mention "React" as the leading cause for choosing Material-UI.

Material Design for Angular and Material-UI are both open source tools. It seems that Material-UI with 48.6K GitHub stars and 11K forks on GitHub has more adoption than Material Design for Angular with 16.5K GitHub stars and 3.57K GitHub forks.

Movielala, Bannerman, and inFeedo are some of the popular companies that use Material Design for Angular, whereas Material-UI is used by DeveloperTown, Ratio, and Code Foundries. Material Design for Angular has a broader approval, being mentioned in 286 company stacks & 381 developers stacks; compared to Material-UI, which is listed in 69 company stacks and 80 developer stacks.

Advice on Material Design for Angular and Material-UI
Needs advice
on
reactstrap
and
Material-UI

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?

See more
Replies (8)

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

See more
Recommends
Material-UI

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.

See more
Robert Smith
Tech Delivery Manager at self · | 2 upvotes · 8.5K views
Recommends

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.

See more
Flavio Ribeiro
REACT DEVELOPER at Beblue · | 1 upvotes · 8.6K views
Recommends
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.

See more
Recommends

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.

See more
Recommends
Material-UI

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

See more
Malik Bagwala
Front-end Developer at Vesatogo Innovations · | 1 upvotes · 8.7K views
Recommends
Chakra UI

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.

See more
Recommends
Material-UI

Material-UI looks great and is easy to use. Highly recommended, my favourite UI framework for React.

See more
Needs advice
on
Next.js
Material-UI
and
Ant Design

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.

  1. Good documentation.
  2. easy CRUD ( date picker and date range picker bundled )
  3. built-in multi-lang feature or Great 3rd library support
  4. Admin dashboard template
  5. well code maintenance

Which is better for the long run?

See more
Replies (2)
Irving Caamal
Full Stack Developer at Freelance · | 2 upvotes · 35.7K views
Recommends

https://github.com/uber/baseweb I highly recommend you baseweb, it's easy and very customizable and also beautiful.

See more
Recommends

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)

See more
Decisions about Material Design for Angular and Material-UI
Kexin Lin
at University of Toronto · | 8 upvotes · 92.7K views

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.

See more
Xinyi Liu
Software Developer at BigClarity · | 6 upvotes · 154.5K views

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.

See more

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

See more
Get Advice from developers at your company using Private StackShare. Sign up for Private StackShare.
Learn More
Pros of Material Design for Angular
Pros of Material-UI
  • 117
    Ui components
  • 62
    Backed by google
  • 51
    Backed by angular
  • 51
    Free
  • 48
    Javascript
  • 34
    Open source
  • 32
    Responsiveness
  • 31
    Easy to learn
  • 28
    Quick to develop
  • 20
    Customizable
  • 8
    Easy to start
  • 8
    Powerful
  • 6
    Themes
  • 6
    Flexible
  • 4
    Flexbox Layouts
  • 3
    Great community
  • 3
    I like its design
  • 2
    Great extensions
  • 1
    CDK
  • 1
    Consistents
  • 1
    It's the best looking out of the box
  • 1
    Seamless integration with AngularJS but lack of docs
  • 0
    Progressive Web Apps - to learn
  • 113
    React
  • 75
    Material Design
  • 46
    Ui components
  • 23
    CSS framework
  • 18
    Component
  • 11
    Looks great
  • 9
    LESS
  • 9
    Responsive
  • 8
    Good documentation
  • 6
    Open source
  • 5
    Code examples
  • 5
    Ui component
  • 5
    Flexible
  • 4
    JSS
  • 3
    Supports old browsers out of the box
  • 3
    Angular
  • 3
    Very accessible
  • 2
    Designed for Server Side Rendering
  • 2
    LADO
  • 2
    Interface
  • 2
    Fun
  • 1
    Asdasd
  • 1
    Easy to work with
  • 0
    555

Sign up to add or upvote prosMake informed product decisions

Cons of Material Design for Angular
Cons of Material-UI
  • 4
    No practical examples
  • 26
    Hard to learn. Bad documentation
  • 22
    Hard to customize
  • 18
    Hard to understand Docs
  • 6
    Bad performance
  • 5
    Extra library needed for date/time pickers
  • 5
    For editable table component need to use material-table
  • 5
    Long Code

Sign up to add or upvote consMake informed product decisions

What is Material Design for Angular?

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

What is Material-UI?

MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

Need advice about which tool to choose?Ask the StackShare community!

What companies use Material Design for Angular?
What companies use Material-UI?
See which teams inside your own company are using Material Design for Angular or Material-UI.
Sign up for Private StackShareLearn More

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with Material Design for Angular?
What tools integrate with Material-UI?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to Material Design for Angular and Material-UI?
Material Design for Bootstrap
It is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Material Design
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Animate.css
It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Nuxt.js
Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable. You can use Nuxt.js for SSR, SPA, Static Generated, PWA and more.
See all alternatives