Track Awesome Material Updates Weekly

A curated list of Google's material design libraries for different frameworks.

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 sachin1092/awesome-material · ⭐ 593 · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Oct 03 - Oct 09, 2022

JS

• MUI — The React component library of Material Design

May 31 - Jun 06, 2021

CSS

• Tronic247 Material - A material design framework based on jQuery and CSS

Mar 25 - Mar 31, 2019

Other

• ScaffoldHub.io — Generate full Angular Material applications with an online modeling tool!

Dec 03 - Dec 09, 2018

JS

• AngularJS (⭐17k) — Material design for AngularJS.

• Angular (⭐23k) — Material design for Angular.

Jul 09 - Jul 15, 2018

Components

• DevExtreme Reactive - High-performance plugin-based React components for Material Design.

Jul 02 - Jul 08, 2018

JS

• DevExtreme — 65+ responsive and feature-complete UI components with customizable Material Design compliant themes. Available for Angular, React, Vue and jQuery.

Oct 02 - Oct 08, 2017

Icons, Fonts and Colors

• Android Asset Studio — A web-based set of tools for generating graphics and other assets that would eventually be in an Android application's res/ directory.

WinForms

• MaterialSkin (⭐2.5k) — Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.

XAML

• MaterialDesignInXamlToolkit (⭐13k) — Google's Material Design in XAML & WPF, for C# & VB.Net.

Oct 03 - Oct 09, 2016

CSS

• material-foundation (⭐356) — A Material Design version of Foundation for Sites.

Sep 26 - Oct 02, 2016

CSS

• mui (⭐4.5k) — A lightweight CSS framework that follows Material Design guidelines.

Jan 18 - Jan 24, 2016

Icons, Fonts and Colors

• Material Design Icons — Community generated Material Design icon pack.

Components

• md-timepicker (⭐12) — A Polymer Timepicker element in Material Design.

Nov 16 - Nov 22, 2015

JS

• react-material (⭐403) — Material design components written with React.js and React Style.

SASS

• quantum-colors (⭐40) — Material Design color palette for your Sass projects.

• quantum-shadows (⭐32) — Material Design drop shadows for your Sass projects.

Jul 20 - Jul 26, 2015

Icons, Fonts and Colors

• material-design-icons (⭐47k) — Material Design icons by Google.

• material-design-iconic-font (⭐1.4k) — Material Design Iconic Font and CSS toolkit.

• material-design-fonticons (⭐74) — Material Design Fonticons is a font converted version of the Google Material Design Icon set.

• material-colors (⭐265) — Colors of Google's Material Design made available to coders.

• material-color (⭐134) — The colour palette, based on Google's Material Design, for use in your project.

• LESS-Material-design-colors — A .less file with al the Google material design colors.

• sass-material-colors (⭐131) — An easy way to use Google's Material Design colors in your Sass/Scss project.

• Google-Material-Design-Font-Icon (⭐5) — Font Icon based on Google Material Design Icon set.

Components

• SVG-Morpheus (⭐2.7k) — JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions.

• Material-Design-ColorPicker (⭐11) — A Material Design Color Picker.

• material-design-color-palette (⭐170) — Material Design Color Palette: LESS/CSS toolkit.

• md-date-time (⭐174) — A Date-Time picker based on Googles Material Design Spec.

• ng-material-floating-button (⭐468) — Material design floating menu with action buttons implemented as an Angularjs directive.

CSS

• Surface (⭐347) — A lightweight, CSS only framework based on Material Design.

• material-ui (⭐82k) — A CSS Framework and a Set of React Components that Implement Google's Material Design.

• bootstrap-material-design (⭐22) — Material design theme for Bootstrap 3.

• materialize (⭐39k) — Materialize, a CSS Framework based on Material Design.

• materialBootstrap (⭐69) — Twitter Bootstrap theme for Google material design.

• material-playground (⭐256) — Polymer material design playground.

• material-framework (⭐388) — An easy to use material design based framework.

JS

• ember-paper (⭐879) — The Ember approach to Material Design.

• material-design-lite (⭐32k) — Material Design Lite Components in HTML/CSS/JS.

SASS

• google-material-design (⭐16) — Small SASS library inspired by google material design guidelines.

WordPress

• MaterialPress (⭐107) — MaterialPress is a WordPress theme, influenced heavily by Google's Material Design philosophy.

• materialwp (⭐460) — Material Design WordPress Theme.

Other

• material-color-scheme (⭐70) — Sublime Text syntax theme based off the Material Design color palette.

• framaterial (⭐42) — A Framework to create Material Design projects.

• Material Design Templates — Various material design inspired themes and templates on ThemeForest.

• Material Palette — Choose your favorite colors and generate your Material Design palette.

• Paper Polymer Elements — Paper elements are a set of visual elements that implement Google's Material Design.

May 18 - May 24, 2015

Other

• MaterialUp — Get your daily dose of Material design inspiration!

Jan 19 - Jan 25, 2015

Animation

• JavaScript
  • Waves (⭐3.5k) — Click effect inspired by Google's Material Design.
  • material-design-hamburger (⭐93) — Android's Material Design hamburger animation built in CSS.
  • Material-Preloader (⭐375) — A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).
  • Google-material-design-ripple-effect (⭐13) — jQuery plugin recreates ripple and focus effect.

Other

• material_design_zh (⭐3.1k) — Material Design Collaborative Chinese translation