Material UI vs Onsen UI

Overview

Material-UI

Stacks2.7K

Followers3.7K

Votes445

Onsen UI

Stacks40

Followers136

Votes11

GitHub Stars8.9K

Forks1.0K

Material UI vs Onsen UI: What are the differences?

Material UI and Onsen UI are two popular frameworks for building user interfaces in web and mobile applications. While they have similarities in terms of providing a library of pre-designed components, they also have some key differences that set them apart.

Design Philosophy: Material UI follows the Material Design guidelines by Google, which emphasizes a clean and minimalistic design with a focus on visual and interactive elements. Onsen UI, on the other hand, takes a more platform-agnostic approach, allowing developers to create unique and customizable user interfaces that are not tied to any specific design language.
Component Library: Material UI offers a rich set of components that are specifically designed for React applications. These components are highly customizable, with extensive documentation and community support, making it easy for developers to create visually appealing interfaces. Onsen UI, on the other hand, provides a framework for building hybrid mobile applications using web technologies like HTML5, CSS, and JavaScript. It offers a wide range of UI components and features that are tailored for mobile app development.
Integration with Frameworks: Material UI is built specifically for React, which means it seamlessly integrates with React components and follows React's component-based architecture. This makes it a great choice for developers who are already familiar with React. Onsen UI, on the other hand, can be used with any JavaScript framework or library, including React, Angular, and Vue. This flexibility allows developers to use their preferred framework while still benefiting from the features and capabilities of Onsen UI.
Styling and Theming: Material UI provides a theming system that makes it easy to customize the look and feel of components. It offers a wide range of pre-built themes and also allows developers to create their own custom themes. Onsen UI also provides a theming system, but it focuses more on providing a consistent look and feel across different platforms. It offers a set of built-in themes that are optimized for iOS and Android, making it easy to create mobile apps that feel native to each platform.
Performance: Material UI is known for its high performance and smooth animations, thanks to its use of CSS-in-JS libraries like JSS. It optimizes the rendering of components and ensures that only the necessary updates are applied to the DOM. Onsen UI also focuses on performance, but it has additional optimizations specifically targeted for mobile app development. It utilizes hardware-accelerated transitions and animations to provide a native-like experience on mobile devices.
Community and Documentation: Material UI has a large and active community of developers, which means there is extensive documentation, tutorials, and code examples available. It also has a dedicated team that actively maintains and updates the library. Onsen UI, while not as popular as Material UI, still has a solid community and provides comprehensive documentation and resources. The Onsen UI team is also actively involved in improving and expanding the framework.

In Summary, Material UI and Onsen UI have different design philosophies, offer different component libraries, have varying levels of integration with frameworks, provide different styling and theming approaches, prioritize different performance optimizations, and have different levels of community and documentation support.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Material-UI, Onsen UI

Kexin

Mar 4, 2021

Decided

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.

281k views281k

Comments

Xinyi

Software Developer at DCSIL

Oct 9, 2020

Decided

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.

359k views359k

Comments

Abigail

Dec 10, 2019

Decided

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

767k views767k

Comments

Detailed Comparison

Material-UI	Onsen UI
Material UI is a library of React UI components that implements Google's Material Design.	Onsen UI helps you develop both hybrid and web apps. If developing hybrid apps, you can use it with the Cordova / PhoneGap command line, or with Monaca tools (CLI, Monaca IDE - cloud-based IDE for Cordova, Localkit - desktop GUI).
Tables; Forms; Snackbars; Buttons; Theming	Open source HTML5 hybrid app framework for PhoneGap & Cordova; JavaScript framework agnostic; Mobile-optimized HTML5, CSS and JavaScript with Web components; UI framework; Responsive layout; Material and Flat design; Comprehensive toolset (CLI, IDE, debugger, remote build etc.) provided as Monaca
Statistics
GitHub Stars -	GitHub Stars 8.9K
GitHub Forks -	GitHub Forks 1.0K
Stacks 2.7K	Stacks 40
Followers 3.7K	Followers 136
Votes 445	Votes 11
Pros & Cons
Pros 141 React 82 Material Design 60 Ui components 30 CSS framework 26 Component Cons 36 Hard to learn. Bad documentation 29 Hard to customize 22 Hard to understand Docs 9 Bad performance 7 For editable table component need to use material-table	Pros 3 Allows for rapid prototyping 3 Works with any JavaScript framework 3 Hybrid mobile 2 Free
Integrations
React Emotion Next.js styled-components Node.js	No integrations available

What are some alternatives to Material-UI, Onsen UI?

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Ionic

Free and open source, Ionic offers a library of mobile and desktop-optimized HTML, CSS and JS components for building highly interactive apps. Use with Angular, React, Vue, or plain JavaScript.

Flutter

Flutter is a mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.

React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

Xamarin

Xamarin’s Mono-based products enable .NET developers to use their existing code, libraries and tools (including Visual Studio*), as well as skills in .NET and the C# programming language, to create mobile applications for the industry’s most widely-used mobile devices, including Android-based smartphones and tablets, iPhone, iPad and iPod Touch.

Foundation

Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.

Semantic UI

Semantic empowers designers and developers by creating a shared vocabulary for UI.

Materialize

A CSS Framework based on material design.

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.

NativeScript

NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms.

Related Comparisons

Material UI vs Onsen UI: What are the differences?

Design Philosophy: Material UI follows the Material Design guidelines by Google, which emphasizes a clean and minimalistic design with a focus on visual and interactive elements. Onsen UI, on the other hand, takes a more platform-agnostic approach, allowing developers to create unique and customizable user interfaces that are not tied to any specific design language.
Component Library: Material UI offers a rich set of components that are specifically designed for React applications. These components are highly customizable, with extensive documentation and community support, making it easy for developers to create visually appealing interfaces. Onsen UI, on the other hand, provides a framework for building hybrid mobile applications using web technologies like HTML5, CSS, and JavaScript. It offers a wide range of UI components and features that are tailored for mobile app development.
Integration with Frameworks: Material UI is built specifically for React, which means it seamlessly integrates with React components and follows React's component-based architecture. This makes it a great choice for developers who are already familiar with React. Onsen UI, on the other hand, can be used with any JavaScript framework or library, including React, Angular, and Vue. This flexibility allows developers to use their preferred framework while still benefiting from the features and capabilities of Onsen UI.
Styling and Theming: Material UI provides a theming system that makes it easy to customize the look and feel of components. It offers a wide range of pre-built themes and also allows developers to create their own custom themes. Onsen UI also provides a theming system, but it focuses more on providing a consistent look and feel across different platforms. It offers a set of built-in themes that are optimized for iOS and Android, making it easy to create mobile apps that feel native to each platform.
Performance: Material UI is known for its high performance and smooth animations, thanks to its use of CSS-in-JS libraries like JSS. It optimizes the rendering of components and ensures that only the necessary updates are applied to the DOM. Onsen UI also focuses on performance, but it has additional optimizations specifically targeted for mobile app development. It utilizes hardware-accelerated transitions and animations to provide a native-like experience on mobile devices.
Community and Documentation: Material UI has a large and active community of developers, which means there is extensive documentation, tutorials, and code examples available. It also has a dedicated team that actively maintains and updates the library. Onsen UI, while not as popular as Material UI, still has a solid community and provides comprehensive documentation and resources. The Onsen UI team is also actively involved in improving and expanding the framework.

Material UI vs Onsen UI

Overview