Ever since Google announced their new design language, the Material Design, there has been a lot of excitement around its animated elements, colors and layout principles. Many websites as well as web applications have embraced the Material design guidelines for their web interface using Material design frameworks and the trend continues to rise.

If you have never heard of Material design before, or haven’t had the time to see the official Material design spec by Google, then we strongly recommend you to see them first in order to understand its principles before going through our list of Material design frameworks.

material design web ui frameworks

With Material design, Google has brought uniformity to its UI (User Interface Design) on all platforms which includes websites, applications and the Android platform itself. Google started with Polymer Project which embraces Material design throughout its Web components. Polymer Project played a key role in Material design’s development and in showcase of Material design concepts for the Web. Soon enough Google announced Material Design Light framework which helps web developers add material design look to websites and web apps.

Material Design Frameworks for the Web

In an attempt to bring Material design to the Web user interface, many third-party (not from Google) web UI frameworks also came to existence and gained popularity. In this post we will be doing a roundup of the best Material Design frameworks and component libraries including Google’s own MDL.

Some of these frameworks are themes/skins based on the popular and well known web frameworks such as Bootstrap and Foundation. Many other are built to support and bring material look to popular JavaScript frameworks such as React, Angular and VueJs.

Material Design Light

material design css framework

Material Design Light (MDL) is a CSS framework developed and maintained by Google. It lets you add Material design look and feel to your websites without relying on any external JavaScript framework. It aims to optimize cross-device use and gracefully degrades in case of older browsers.

MDL offers many ready-made components and templates to help you get started quickly. You can also use their customizer utility to pick your choice of Material design colors. You can find MDL on GitHub too. Grab this free Material portfolio template, we built with the MDL framework.

Materialize

materialze-framework-material-design

Materialize is a modern responsive front-end framework based on Material Design. For use in your web projects, it provides an option of both CSS as well as source SCSS files, along with JavaScript, Material design icons and Roboto font. Included components are basic ones such as grids, forms, buttons, navbar and cards. Materialize is available on GitHub as well.

Material UI

material-ui-css-framework

Material UI is a CSS Framework and a set of React Components that implement Google’s Material Design. It provides support for components such as Buttons, Dialog, Dropwdown menu, Icon buttons, Inputs, Switches, Toolbar and more. You can find Material UI on GitHub too.

BMD – Bootstrap + Material Design

BMD is a premium Material Design skin for Bootstrap along with many additional components. It offers Material design color palette and components like spinner, floating action button (FAB), nav tabs, Material design card layouts, toast messages and sidebar menu. It also has Material animations and integration with original Material icons. It also includes a starter template.

Material Foundation

Material Foundation is a Material Design version of Foundation for Sites by Zurb. It is a MIT licensed project available on GitHub and offers all Foundation components in Material design along with additional Material components such as FAB (Floating action button).

Angular Material

Angular Material offers Material design components for Angular apps, that work across the web, mobile and desktop. It has been built by the Angular team to integrate seamlessly with Angular. You can find Angular material for both Angular 1 and Angular 2.

Keen UI

Keen UI is a collection of essential Material design UI components written with Vue. Created by Josephus Paye II, Keen UI’s focus is on creating reusable components that have interactivity. You will find numerous components such as for alert, autocomplete, FAB, popover, snackbar, tabs and many other in material design. The project is available on GitHub and is MIT Licensed.

Paper Bootswatch for Bootstrap

paper-bootstrap-material-design-theme

Paper is a bootswatch theme for the Bootstrap framework. It includes all the components that Bootstrap provides but in a Material Design skin.

MD Bootstrap

MD Bootstrap is a free Material design UI kit for Bootstrap 3 as well as Boostrap 4. It offers 400+ material UI elements, 600+ material icons, 70+ CSS animations along with free templates and tutorials to build a material website.

Bootstrap Material

bootstrap-material-design

Similar to Paper, Bootstrap Material is another theme for Bootstrap framework and provides all the components included in Bootstrap. On top of that, it also includes support for 740 original Material design icons from the Google Material Design Icons repository.

Daemonite’s Material UI

Daemonite’s Material UI is a cross-platform and responsive front-end framework based on Material Design using Bootstrap 4. Replacing bootstrap.min.css on a site with material.min.css from this project without any other changes will transform all components and elements into a materialised look. You can find the project on GitHub.

Essence

Essence is a Material Design CSS Framework built using Facebook’s react.js library. This MIT licensed project is open source and available on GitHub.

Leaf BETA

leaf-meterial-css-framework

Leaf is CSS framework developed by Kim Korte based on the Google’s Material Design. It has extensive list of components such as buttons, cards, sliders, menu, tabs etc. It includes icons by Icomoon, instead of the original Material design icons. Leaf is also available on GitHub and is open for contributions and feedback.

MUI CSS Framework

mui-material-design-css-framework

MUI is a lightweight HTML, CSS and JS framework for building sites following Google’s Material Design guidelines. MUI is designed from the ground up to be fast, small and developer friendly. By design it only includes the basic components you need to build a site that follows Google’s Material Design guidelines. MUI CSS/JS has no external dependencies. MUI is also available on GitHub and is open for contributions.

LumX

LumX is a front-end framework based on Google Material Design. LumX is based on Sass preprocessor and AngularJS. It is a MIT licensed project available on GitHub.

Polymer Project

google-polymer-paper-material

Google’s Polymer Project is a web framework and their embodiment of Material Design for the web. Polymer aims to support all major modern browsers such as IE (10+), Chrome, Safari, and Firefox. Extensive set of documentation and getting started guide is available at the Polymer Project.

You can use the Polymer library to make Web Components, a powerful new platform feature for extending HTML and componentizing your apps. Additionally, you have Polymer App Toolbox to build Progressive Web Apps.

Recommended Material Design CSS Framework

If you find the above list of Material Design frameworks overwhelming, we recommend sticking to either Google’s own MDL framework or going with one of the Bootstrap Material skin such as BMD, if you already know Bootstrap. For building progressive web apps, Google’s Polymer Project is an ideal choice.

In case you are choosing any other framework, make sure to check their respective GitHub repos for recent activity and issues along with the presence of healthy community around it.

Material Design Resources for Building Websites

If you are planning to build websites with Material Design then the following additional resources would help you get started quickly with your projects:

Material Design Web UI Demo

If you are looking for some Material Design web UI demo for inspiration, then have a look at these (in Chrome for best experience) which are created using the Polymer Project.

Topeka

topeka-material-demo

Topeka is a fun quiz app built using material-design based paper-elements

Paper Elements

sampler-paper

Paper Elements is a sample showcasing Polymer elements based on Material design.

Paper Calculator

material-calculator

A calculator app mock-up highlighting material ink effects.

Future of Material Design

While Material Design is a hot trend right now and is completely embraced by Google across its apps, websites and Android interface, Microsoft and Apple have their own set of design languages. You can read a comparison between design languages of these tech giants.

As per Google trends, “Material Design” saw a sudden rise after its announcement and quickly surpassed the “Flat Design” trend.

material design trend
Material Design Trend

While the trend of Material Design is stable as shown in chart above, we are surely seeing some great momentum with a lot of Material Design CSS frameworks and resources now being available to web designers and developers and an increased adoption of Material principles in web design.

What is your take on Material Design? Do you love it and have adopted it in your projects?

About the author

Kanishk Kunal

Kanishk is a passionate developer and creator of many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal

14 comments

  1. Jessica Green says:

    Great list! Will try some of them on my own site. Thanks for the tip!

  2. lucky ali says:

    material design is new and nice trend . thanks for this article.

  3. Argelius says:

    Hi! Great article! I’m a developer on a mobile UI framework called Onsen UI. We recently released Material Design components that can be used in both Angular and React: https://onsen.io/v2/

    1. Hi Argelius,

      Onsen UI looks good and we would be glad to write more about it. You can get in touch with us using our Contact page.

      Thanks,
      Kanishk

    2. Jeancarlo Fontalvo says:

      Wow that’s super cool bro! •O•

  4. Bolaji says:

    Enlighten info on Material design,
    I’m a novice in web design,just starting out with HTML & CSS.I have a question if you dont mind.Can material design be used separately for webdesign or it has to be used with some server language like Python and Material design itself used in frontend development?

    1. Hi Bolaji,

      Material design is a design concept that can be applied to any front-end design. You don’t need to depend on any server language for it. In fact all the framework listed above are for front end development and can be used together with any server language.

  5. Thanks for this article.

    For those whose more familiar with bootstrap and want to implement MD without using another framework,
    I would recommend mdbootstrap.com instead of FezVrasta’s “Material design theme for Bootstrap 3” .. because it’s richer and well documented. my personal perspective.

    Thanks again for the effort!

  6. Alex says:

    Hi,

    Thank you for the awesome list! I would like to recommend you this new Bootstrap UI Kit based on Material Design: http://demos.creative-tim.com/material-kit/index.html

  7. Dawid says:

    I wonder how could you missed Material Design for Bootstrap (http://mdbootstrap.com) ? :)
    IMHO currently this ist the most comprehensive framework.

  8. reck says:

    This looks great, yet another material design framework http://www.vitaminstudio.in

  9. cikal says:

    Thank’s a Lot for this article, recently i’m using Bootstrap for my site. But migration always make me headache, i was helpfull and take some inspiration from your article..

  10. Pavel Ustyugov says:

    I like that review. Planned to make a new site using Material Design and that article will help to choose one framework.

  11. Sam says:

    You are also missing http://react-toolbox.com/#/, which is very cool :)

Leave a Reply

Your email address will not be published. Required fields are marked *