Awesome Material Overview
A curated list of Google's material design libraries for different frameworks.
🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 sachin1092/awesome-material · ⭐ 593 · 🏷️ Front-End Development
Awesome Material Design
A curated list of Google's material design based libraries, resources and awesome things.
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.
- Material Design Icons — Community generated Material Design icon pack.
- 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.
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.
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-timepicker (⭐12) — A Polymer Timepicker element in Material Design.
- 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.
- DevExtreme Reactive - High-performance plugin-based React components for Material Design.
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.
- mui (⭐4.5k) — A lightweight CSS framework that follows Material Design guidelines.
- material-foundation (⭐356) — A Material Design version of Foundation for Sites.
- Tronic247 Material - A material design framework based on jQuery and CSS
JS
- AngularJS (⭐17k) — Material design for AngularJS.
- Angular (⭐23k) — Material design for Angular.
- DevExtreme — 65+ responsive and feature-complete UI components with customizable Material Design compliant themes. Available for Angular, React, Vue and jQuery.
- ember-paper (⭐879) — The Ember approach to Material Design.
- material-design-lite (⭐32k) — Material Design Lite Components in HTML/CSS/JS.
- MUI — The React component library of Material Design
- 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.
- 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.
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.
Other
- material_design_zh (⭐3.1k) — Material Design Collaborative Chinese translation
- 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.
- MaterialUp — Get your daily dose of Material design inspiration!
- 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.
- ScaffoldHub.io — Generate full Angular Material applications with an online modeling tool!
Other Awesome Lists
Other amazingly awesome lists can be found in the awesome-awesomeness (⭐29k) list.
Contributing
Your contributions are always welcome! Please read the contribution guidelines first.