The 15 Best Material Design Frameworks and Libraries

Material design was developed by Google, with the basic idea to create a unified style for all of the company's web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows. You can read about the guidelines in full detail here.

Although Google's design language is seen mainly in native Android apps, it's still a great choice for web and hybrid applications. To aid users in the creation of web projects rocking the Material look, there are many frameworks and libraries offering ready-to-use components and styles. Here is our list of the top 15!


mdl.jpg

Material Design Lite

Material Design Lite is an official Google framework, so you can always expect the components to be up to date with the latest standards of the visual language. It looks fantastic, is relatively easy to use, and has no external dependencies.


materialzie.png

Materialize

This is a front-end framework for building responsive web apps and sites. It's really simple to get started with, especially to people familiar with other similar projects, such as Bootstrap. A cool feature is the SASS version, which allows users to choose which components to include.


material_ui.png

Materual-UI

Material-UI is a rich set of React components implementing Material Design principles. This is a very polished library featuring pixel-perfect CSS styles and animations. There are also two separate themes for users to choose from - dark and light.


5_mui.png

MUI CSS

This is one of the most lightweight framework on our list, without any external dependencies and only 12kb gzipped for the CSS and JS. It offers React support, customization via SASS files, and has a separate inline version for styling emails.


6_polymer.png

Polymer

Polymer is another Google product on our list. It's a library for building fast, reusable web components which then you can import in your projects. Polymer offers a big selection of ready-to-use elements, organized in seven categories. One of them is called Paper and is full of Material Design components.


7_ionic_material.jpg

Ionic Material

This is an extension library for the Ionic hybrid mobile app framework. It adds new classes, methods and helpers alongside a fresh set of CSS styles to bring the Material look to Ionic, without changing the way apps are developed with the framework.


foundation.jpg

Material Foundation

The Zurb Foundation framework is another popular tool for building responsive websites and apps. This is an independent set of components that offers a quick way to add a Material twist to some of Foundation's elements. It looks pretty good but doesn't include many key Material Design components.


12_surface.png

Surface

The result of a two-week long experiment, Surface is a CSS only framework in which many of the classic Material UI components are recreated without the help of any JavaScript or other programming languages. Since it consist of just one CSS file, it's extremely lightweight and easy to use.


13_essence.png

Essence

Essence is a CSS framework based on React and React Native. It allows developers to build super-fast and at the same time great looking web & mobile interfaces, implementing the Material Design specification. Using npm you can install the whole library, or just the modules you really need.


14_lumx.png

LumX

This Angular.js-like framework provides many, well-animated CSS and JavaScript components. For the layouts and styles LumX uses the Sass-based library Bourbon, and for the animations the popular Velocity.js. By combining these and some other plugins, LumX is able to offer a wide range of tools for building responsive web apps.


8_paper.jpg

Paper Theme for Bootstrap

The guys at Boostwatch make a lot of cool Bootstrap themes, including one imitating Material Design, called Paper. It doesn't have all of the classic Material components, but it is still a great option for people who already work with Bootstrap, since they don't have to change absolutely anything (except for importing the theme) to get a modern looking app.


material_for_bootstrap.jpg

Material Design for Bootstrap

Another great option for Bootstrap enthusiasts. This is an actively updated theme for the front-end framework, which adds new styles and a number of JavaScript and jQuery plugins to apply Google's design language to Bootstrap. A big plus here is the active community on GitHub (over 14000 stars).


4_angular_material.png

Angular Material

AngularJS is a hugely popular open-source framework for web development. It's primarily maintained by a team in Google, so it's no surprise it gets is own version of a Material Design kit. For now it works only with Angular 1, but it most probably will get a port for the second version as well.


10_material.png

Material

You can think of Material as a UI framework that is the perfect mix between Bootstrap and MDL - it works very similarly to Bootstrap (almost the same grid and HTML), but adds on top of that many Material components such as cards and pop-out date pickers. Most of the traditional Material Design elements are present here and are made to look spot on.


15_phonon.png

Phonon

The Photon framework is dedicated for the development of hybrid mobile apps. Since it's only around 60kb and does not depend on any third party libraries, it can be used to create Cordova and PhoneGap applications that are very lightweight. The look and feel of Photon's UI components follow closely Material Design's concepts.


frmaework7.jpg

A Suggestion From Our Readers: Framework7

Framework7 is a created with hybrid mobile apps in mind. It allows developers to quickly build web apps that imitate the appearance and behavior of native iOS and Android. To make that possible there are two distinct themes - one for Apple devices, and the other one offering Material Design components and styles.


icons.jpg

Bonus: Material Icons

This is the icon set that Google uses in most of their web, Android and iOS apps. There is a huge list of icons to chose from and more are being added all the time. It's completely free and very easy to implement through Google Fonts or other methods.

Conclusion

Most of the libraries and frameworks on our list offer similar components and overall features. It's up to every individual developer to decide which one works best for them and their current project. We hope we've helped you make the right choice!

 

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

Comments 17

  • Hi, Thanks for such a informative article.
    I have a query related to selection of best material framework if one have a good experience & exposure in bootstrap framework, with jQuery as scripting language in past. I have never work on Angular JS, other css framework. As I am working on bootstrap, Jquery for last 4 year, for a new project we need to work on material design framework. So could you please suggest best material design framework which works well with bootstrap, jquery and at the same time should be accessible (section 508 in USA).
    Thanks!

You forgot to mention Framework7

Danny Markov

Thanks for the suggestion Tarek!
Framework7 is great, we will add it to the list.

Thank you for the mention, i chose FrameWork7 for my next project <3 plus thanks to Danny for awesome collection.

Forget to mention this too... This looks great, yet another material design framework http://www.vitaminstudio.in

Bondifrench

There is also Polythene (http://polythene.js.org/) a Material design components library for the Mithril.js framework (a lightweight, fast and highly composable MVC javascript framework)

Thank you for this link !

Michael M

Thank you for the round up.

Argelius

Material Design components has been added to the Onsen UI library

Thanks for the great information!

Emmanuel Limal

Hi. We have been using AngularJS for our project but we struggle with menu being too slow on old mobile such as Samsung S4. Is there any of the above framework/library that is looking good, very fast and could solve the problem?

Hi there! Thank you for your article
There is a cool UI library Webix for web and mobile development with data widgets, visualisation tools, layouts and touch features. And they also have a material skin:
http://webix.com/demos/material/admin-app/#!/app/forms

Webix UI library - really good but not so popular yet.

Pretty sure Material Design for Bootstrap would fit perfectly here!

https://github.com/ostux/materialReach

Material Design - only CSS solution.
Not the best, but one day may be useful.

MDL4Dart (native Dart port of MDL) + a lot more! Check it out: http://www.material-design-lite.pub/ + http://styleguide.material-design-lite.pub/#/

MuthuKumar

https://vuematerial.github.io/ - material design for Vue 2