Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Richienb/awesome-material-design

An awesome list of Material frameworks, components, and other tools.
https://github.com/Richienb/awesome-material-design

List: awesome-material-design

Last synced: about 1 month ago
JSON representation

An awesome list of Material frameworks, components, and other tools.

Awesome Lists containing this project

README 

        
# Awesome Material Design



Material is a design system – backed by open-source code – that helps teams build high-quality digital experiences



[Material Design Docs](https://material.io/)



Below is a list of frameworks, components, templates, tools, and resources for Material Design.



### Table of Contents



* [CSS and JS](#css-and-js)

* [React](#react)

* [Angular](#angular)

* [Vue](#vue)

* [React Native](#react-native)

* [Flutter](#flutter)

* [Android](#android)

* [iOS](#ios)

* [Aurelia](#aurelia)

* [Elm](#elm)

* [Color](#color)

* [Icons](#icons)

* [Other](#other)

  * [Wordpress](#wordpress)

  * [Cordova](#cordova)

  * [AngularJS](#angularjs)

  * [Blazor](#blazor)

  * [XAML](#XAML)



## CSS and JS



### Frameworks CSS JS

* [Material Components for the Web](https://material.io/develop/web/) - Google's official CSS and JS Material design components, still in development

* [MaterialzeCSS](https://materializecss.com/) - Popular CSS and JS (+ jquery) Material Framework with many components supported

* [Material Design Lite](https://getmdl.io/) - Created by google, limited support, replaced by Material Components for the web

* [MUICSS](https://github.com/muicss/mui) - Lightweight Material framework, frequently updated

* [Surface](https://mildrenben.github.io/surface/about.html) - Another lightweight material framework, frequently updated

* [Polymer MDC Web Components](https://github.com/material-components/material-components-web-components) - Material Design implemented as Web Components.

* [Material Foundation](http://materialfoundation.mikolajdobrucki.com/) - Official Material Theme for Foundation, not updated

* [Matter](https://github.com/finnhvman/matter) - Pure CSS material components using modern css practices



#### Bootstrap



* [Bootstrap Material Design](https://github.com/FezVrasta/bootstrap-material-design) - Bootstrap 3 and 4 material design, built on Bootstrap. Not updated

* [Material](https://github.com/Daemonite/material) - Bootstrap 4 Material components, updated recently

* [Material Kit](https://github.com/creativetimofficial/material-kit) - Bootstrap 4 theme that can be used with many frameworks and platforms

* [Propeller](https://github.com/digicorp/propeller) - 25 Material UI components built on Bootstrap 4

* [material-sass](https://github.com/mkhairi/material-sass) - Material SASS for Bootstrap as a RubyGem



### Components

* [css-ripple-effect](https://github.com/mladenplavsic/css-ripple-effect) - Pure CSS Ripple, no JS

* [paper-ripple](https://github.com/virtyaluk/paper-ripple) - CSS and JS Ripple Effect

* [md-preloader](https://github.com/rtheunissen/md-preloader) - Material SVG Loader animated with CSS

* [md-date-time-picker ](https://github.com/puranjayjain/md-date-time-picker) - Material Design Date and Time picker in CSS, JS, and HTML

* [materialize-autocomplete](https://github.com/icefox0801/materialize-autocomplete) - Jquery and CSS Material Autocomplete component for Materialize

* [Material-Design-For-Full-Calendar](https://github.com/jackyliang/Material-Design-For-Full-Calendar) - Full Material Calender with Material Design built on Jquery and CSS

* [mdtogglecss](https://github.com/pedrolaxe/mdtogglecss) - Material Design Toggle slider in CSS

* [paper-toolbar](https://github.com/PolymerElements/paper-toolbar) - Ploymer material toolbar



### Templates

* [material-dashboard](https://github.com/creativetimofficial/material-dashboard) - Material Dasbhoard for Bootstrap 4

* [Bootstrap-4-templates](https://github.com/mdbootstrap/Bootstrap-4-templates) - Many free material templates for Bootstrap 4

* [Material-admin](https://github.com/BootstrapDash/Material-Admin) - Material Dashboard Admin built on Bootstrap 4 and jquery

* [Ecommerce-Template-Bootstrap](https://github.com/mdbootstrap/Ecommerce-Template-Bootstrap) - Bootstrap 4 Ecommerce template built with material design

* [Blog-Template-Bootstrap](https://github.com/mdbootstrap/Blog-Template-Bootstrap) - Boostrap 4 blog template in material



## React



### Frameworks

* [Material UI](https://material-ui.com/) - Most popular UI library for React, frequently updated.

* [React MD](https://github.com/mlaursen/react-md) - Material React Components built with sass

* [React Materialize](https://github.com/react-materialize/react-materialize) - Port of Materialze to React 

* [React Material Components](https://github.com/material-components/material-components-web-react) - Port fo Material Components for the Web to react

* [React Toolbox](https://github.com/react-toolbox/react-toolbox) - Material Design components in React and CSS modules

* [React Bootstrap with Material](https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design) - Material Design theme for React Bootsrap

* [rmwc](https://github.com/jamesmfriedman/rmwc) - Another port of Material Componetns for the web for react

* [DevExtreme Reactive](https://github.com/DevExpress/devextreme-reactive) - React components using Bootstrap and Material Design



### Components

* [react-material-floating-button](https://github.com/nobitagit/react-material-floating-button) - Material Design FAB button in React

* [material-table](https://github.com/mbrn/material-table) - Material Table based on Material UI with more options

* [material-ui-chip-input](https://github.com/TeamWertarbyte/material-ui-chip-input) - Material Chip in a TextField based on Material UI

* [mui-datatables](https://github.com/gregnb/mui-datatables) - Material design datatables based on Material UI with more features

* [react-materialui-notifications](https://github.com/puranjayjain/react-materialui-notifications) - Material UI notifications with more features

* [material-auto-rotating-carousel](https://github.com/TeamWertarbyte/material-auto-rotating-carousel) - Material Carousel based on Material UI

* [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers) - Beautfiul Material Date and Time Pickers for use with Material UI



### Templates

* [material-dashboard-react](https://github.com/creativetimofficial/material-dashboard-react) - Full dashboard ui built in react and material design

* [react-admin](https://github.com/marmelab/react-admin) - Framework using Material UI and Graphql to create Admin panels

* [material-sense](https://github.com/alexanmtz/material-sense) - Template built on Material UI for building a full app



## Angular



### Frameworks

* [Angular Material](https://material.angular.io/components/categories) - The Angular Team's Material Component Library

* [Material Community Components](https://github.com/tiaguinho/material-community-components) - An awesome idea for a library of components built by the angular community for components not found in the offical Angular Material rep.

* [Angular2 Materialize](https://github.com/InfomediaLtd/angular2-materialize) - Port of materialilze to Angular

* [Angular Bootstrap with Material Design](https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design) - Material design theme for bootstrap ported to angular bootstrap

* [angular-mdc-web](https://github.com/trimox/angular-mdc-web) - Port of Material Design Components for the Web to Angular 2

* [angular2-mdl](https://github.com/mseemann/angular2-mdl) - Port of Material Design lite to Angular 2



### Templates

* [material-dashboard-angular2](https://github.com/creativetimofficial/material-dashboard-angular2) - Material Dashboard framework built on Material Kit

* [angular-material-dashboard](https://github.com/flatlogic/angular-material-dashboard) - Material Dashboard for Angular 2

* [cdk-admin](https://github.com/codetok/cdk-admin) - Admin dashboard using Angular Material and Flexbox

* [material-angular-dashboard](https://github.com/CreativeIT/material-angular-dashboard) - First dark themed Angular Dashboard



### Components

* [md-data-table](https://github.com/daniel-nagy/md-data-table) - Material Data table for Angular Material 2 

* [ng2-md-datatable](https://github.com/fredguile/ng2-md-datatable) - Another Angular 2 Maaterial Data Table

* [MaterialTimeControl](https://github.com/SteveDunlap13/MaterialTimeControl) - Awesome Material Time picker and control

* [angular-material-sidemenu](https://github.com/xandorxicay/angular-material-sidemenu) - Sidemenu for Angular material

* [ng2-material-dropdown](https://github.com/Gbuomprisco/ng2-material-dropdown) - Material Dropdown for Angular 2

* [angular-material-fileupload](https://github.com/nishantmc/angular-material-fileupload) - A file upload and progress indicator for Angular 2

* [ngx-mat-select-search](https://github.com/bithost-gmbh/ngx-mat-select-search) - Select search dropdown for Angular Material

* [angular-mgl-timeline](https://github.com/glutengo/angular-mgl-timeline) - A vertical timeline component built for Angular Material

* [angular2-mdl-ext](https://github.com/mseemann/angular2-mdl-ext) - Some more material components for Angular 2 Material Design Lite project

* [material2-carousel](https://github.com/gbrlsnchs/material2-carousel) - A material carousel for Angular material

* [ng2-daterange-picker](https://github.com/albertnadal/ng2-daterange-picker) - Select a date range component for Angular 2



## Vue



### Frameworks

* [Vue material](https://github.com/vuematerial/vue-material) - Lightweight material library for Vue

* [Vuetify](https://github.com/vuetifyjs/vuetify) - Popular full material library for Vue

* [Muse-ui](https://github.com/museui/muse-ui) - Custom material library for Vue

* [Vue Bootstrap with Material Design](https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design) - Theme and components for Material Design on Vue Bootstrap

* [Vue MDC](https://github.com/posva/vue-mdc) - Port of Material Design Components for the Web to Vue

* [Vue MDC Adapter](https://stasson.github.io/vue-mdc-adapter) - Integration of Material Components for Vue.js which follows the best practices recommended by Google.

* [Keen UI](https://github.com/JosephusPaye/Keen-UI) - Lightweight Material Components for Material Web

* [material-components-vue](https://github.com/matsp/material-components-vue) - Updated Port of Material Design Components for the Web to Vuew

* [Devextreme Reactive](https://github.com/DevExpress/devextreme-reactive) - Material Components built on Bootstrap and Vue

* [quasar](https://github.com/quasarframework/quasar) - A framework on top of Vue that provides Material Design 2 components

* [BalmUI](https://github.com/balmjs/ui-vue) - Modern Material Components for Vue



### Components

* [vue-materialize-datatable](https://github.com/MicroDroid/vue-materialize-datatable) - Materialize Datatable built for Vue

* [vue-ripple](https://github.com/BosNaufal/vue-ripple) - Simple Ripple implemented in Vue

* [vuetify-daterange-picker](https://github.com/praveenpuglia/vuetify-daterange-picker) - Material Daterange picker for Vuetify

* [vue-ripple-directive](https://github.com/PygmySlowLoris/vue-ripple-directive) - Material Ripple built as a Vue Directive

* [vue-cool-select](https://github.com/iliyaZelenko/vue-cool-select) - Select with autocomplete with a material theme

* [vue-floating-action-button](https://github.com/a62527776a/vue-floating-action-button) - FAB implemented in Vue

* [vue-material-year-calendar](https://github.com/nono1526/vue-material-year-calendar) - 12 month material calener in Vue

* [vue-mdl-datepicker](https://github.com/CYBAI/vue-mdl-datepicker) - Material Date picker for Vue



### Templates

* [vue-material-admin](https://github.com/tookit/vue-material-admin) - Vue Material Admin built on Vuetify

* [adminify](https://github.com/topfullstack/adminify) - An another Material Admin built on Vuetify



## React Native



### Frameworks React Native

* [React native Material Kit](https://github.com/xinthink/react-native-material-kit) - Material UI components for react native, updated

* [React Native Material UI](https://github.com/xotahal/react-native-material-ui) - Highly Customizable react native componetns, updated frequently

* [React Native Paper](https://github.com/callstack/react-native-paper) - Material Design for iOS and Android



### Components React Native

* [react-native-material-textfield](https://github.com/n4kz/react-native-material-textfield) - Material Design Textfield for React native

* [react-native-md-textinput](https://github.com/evblurbs/react-native-md-textinput) - Another Material Design Text Input

* [react-native-material-dropdown](https://github.com/n4kz/react-native-material-dropdown) - Material Design Dropdown for React native

* [react-native-material-buttons](https://github.com/n4kz/react-native-material-buttons) - Material Buttons with Ripple for React Native

* [react-native-material-menu](https://github.com/mxck/react-native-material-menu) - Great Material Menu component for RN

* [react-native-material-cards](https://github.com/SiDevesh/React-Native-Material-Cards) - Material Cards for RN

* [react-native-fab](https://github.com/SiDevesh/React-Native-FAB) - Just a simple Material FAB

* [react-native-material-ripple](https://github.com/n4kz/react-native-material-ripple) - Awesome Material design component, works on both Android and iOS

* [react-native-circular-menu](https://github.com/cinder92/react-native-circular-menu) - Amazing circular menu animation for RN

* [react-native-material-switch](https://github.com/recr0ns/react-native-material-switch) - Material Switch for both iOS and Android

* [react-native-material-dialog](https://github.com/hectahertz/react-native-material-dialog) - Custom Material dialog for react native

* [react-native-material-tabs](https://github.com/iRoachie/react-native-material-tabs) - Material Tabs implemented in RN

* [react-native-material-design-searchbar](https://github.com/ananddayalan/react-native-material-design-searchbar) - Material design Searchbar

* [react-native-material-bottom-navigation](https://github.com/timomeh/react-native-material-bottom-navigation) - Material bottom navigation for RN

* [react-native-material-backdrop](https://github.com/darleikroth/react-native-material-backdrop) - Material backdrop for react native



## Flutter



### Components

* [Material-Backdrop-Flutter](https://github.com/kishan2612/Material-Backdrop-Flutter) - Backdrop from new material design for Flutter

* [IntroViews-Flutter](https://github.com/aagarwal1012/IntroViews-Flutter) - Nice intro animations and screens using material design

* [flutter_colorpicker](https://github.com/mchome/flutter_colorpicker) - Material card color picker

* [flutter-autocomplete-textfield](https://github.com/felixlucien/flutter-autocomplete-textfield) - Autocomplete textfield built with material

* [flutter_fluid_slider](https://github.com/rvamsikrishna/flutter_fluid_slider) - Animated slider 

* [flutter_speed_dial](https://github.com/darioielardi/flutter_speed_dial) - FAB speeddial in flutter

* [material_pickers](https://github.com/long1eu/material_pickers) - Another flutter color picker

* [rubber](https://github.com/mcrovero/rubber) - Elastic Material Bottom Sheet

* [ProgressButton](https://github.com/halilozercan/ProgressButton) - Material Button that morphs into a progress indicator



## Android



### Frameworks

* [Material Components Android](https://github.com/material-components/material-components-android) - Material Components developed by Google for Android

* [Material](https://github.com/CosmicMind/Material) - Rebuilding material components using Motion 

* [Material](https://github.com/rey5137/material) -  Back-port Material Design components to pre-Lolipop Android

* [MaterialDesignLibrary](https://github.com/navasmdc/MaterialDesignLibrary) - Material Components for Android L



### Components

* [MaterialSpinner](https://github.com/jaredrummler/MaterialSpinner) - Material Design spinner for android

* [MaterialDateTimePicker](https://github.com/wdullaer/MaterialDateTimePicker) - Long supported Material DateTimePicker, supports Android 4.1 

* [MaterialDateRangePicker](https://github.com/heysupratim/MaterialDateRangePicker) - Fork of MaterialDateTimePicker that allows for a range to be chosen

* [SublimePicker](https://github.com/vikramkakkar/SublimePicker) - Date and Time picker with many options

* [MaterialDrawer](https://github.com/mikepenz/MaterialDrawer) - All in one Material Design 2 drawer for Android

* [MaterialNavigationDrawer](https://github.com/neokree/MaterialNavigationDrawer) - An easier to use Material Navigation Drawer 

* [material-menu](https://github.com/balysv/material-menu) - Cool morphing material menu icons

* [material-dialogs](https://github.com/afollestad/material-dialogs) - Modern Material Dialogs for Android

* [MaterialEditText](https://github.com/rengwuxian/MaterialEditText) - Text input for Android

* [MaterialSearchView](https://github.com/MiguelCatalan/MaterialSearchView) - Text Search Field for Android

* [MaterialLogin](https://github.com/fanrunqi/MaterialLogin) - Neat Login animation component

* [Material-backdrop)](https://github.com/Semper-Viventem/Material-backdrop) - Implemented new material component Backdrop for android

* [Material-Backdrop-Android](https://github.com/kishan2612/Material-Backdrop-Android) - Andother material backdrop for android

* [IBackdrop](https://github.com/pedromassango/IBackdrop) - Kotlin Material Backdrop 



## iOS



### Frameworks

* [Material](https://github.com/CosmicMind/Material) - Material Switch components

* [Material Components iOS](https://github.com/material-components/material-components-ios) - Material components for iOS built by Google



### Components

* [Material-Controls-For-iOS](https://github.com/fpt-software/Material-Controls-For-iOS) - Radio buttons, checkboxes, and more for iOS

* [DropDown](https://github.com/AssistoLab/DropDown) - Material Dropdown for iOS

* [material-showcase-ios](https://github.com/aromajoin/material-showcase-ios) - Component to walkthrough some actions, using material

* [GoogleMaterialDesignIcons](https://github.com/dekatotoro/GoogleMaterialDesignIcons) - Icons ported to iOS

* [material-motion-swift](https://github.com/material-motion/material-motion-swift) - Set of animations for Material in swift

* [BFPaperButton](https://github.com/bfeher/BFPaperButton) - Material buttons in iOS

* [JTMaterialTransition](https://github.com/jonathantribouharet/JTMaterialTransition) - Material transitions for components transitioning into others

* [paper-onboarding](https://github.com/Ramotion/paper-onboarding) - Material tab component for iOS

* [circle-menu](https://github.com/Ramotion/circle-menu) - Nice ciruclar material menu with animations

* [paper-switch](https://github.com/Ramotion/paper-switch) - Material switch component that changes the background as well

* [expanding-collection](https://github.com/Ramotion/expanding-collection) - Expanding a material card to a section

* [WYMaterialButton](https://github.com/Yu-w/WYMaterialButton) - Material button with a bounce



## Aurelia

* [Aurelia Materialize Bridge](https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge) - Aurelia Bridge for materializecss

* [Aurelia mdl](https://github.com/genadis/aurelia-mdl) - Material Design Lite port to aurelia

* [Aurelia mdc bridge](https://github.com/Ullfis/aurelia-mdc-bridge) - Material Design Components for the web port to aurelia

* [Aurelia Material](https://github.com/redpelicans/aurelia-material) - Another wrapper for Material Design Lite



## Elm



### Frameworks

* [Elm MDC](https://github.com/aforemny/elm-mdc) - Port of Material Design Components to elm

* [Elm MDL](https://github.com/debois/elm-mdl) - Port of Material Design lite to Elm



### Components

* [material-icons](https://github.com/elm-community/material-icons) - Material icons made available in elm

* [elm-material-datepicker](https://github.com/Leonti/elm-material-datepicker) - Material Datepicker built in elm

* [elm-dialog](https://github.com/damukles/elm-dialog) -  Material Dialog in elm



## Color



### Site Tools

* [Material Color Tool](https://material.io/tools/color/#!/?view.left=0&view.right=0) - Offical color tool for creating themes with material colors

* [Material UI Colors](https://materialuicolors.co/) - Great tool for selecting and browsing Material Colors 

* [Material Palette](https://www.materialpalette.com/) - Similiar color tool for browsing Material Colors A



### Dev

* [material-colors](https://github.com/shuhei/material-colors) - Exposes Material colors as css classes and variables as well as global variables



## Icons



* [Material Design Icons](https://material.io/tools/icons/?style=baseline) - Official Material Icons by Google

* [Material Design Community Icons](https://materialdesignicons.com/) - Material Design Icons created by the community

* [Material Design Iconic Font](https://zavoloklom.github.io/material-design-iconic-font) - A full suite of Material design icons (created and maintained by Google) with additional community-designed and brands icons for easy scalable vector graphics on websites or desktop.



### Dev

* [material_icons](https://github.com/Angelmmiguel/material_icons) - Rails wrapper for material icons

* [angular-material-icons](https://github.com/klarsys/angular-material-icons) - Material icons offer



 ## Other



### Wordpress

* [MaterialWP](https://github.com/braginteractive/materialwp) - Material Theme for wordpress



### Cordova

* [Phonon](https://phonon.quarkdev.com/) - Javascript/CSS3/HTML5 mobile framework for PhoneGap/Cordova



### AngularJS

* [Lumx](https://github.com/lumapps/lumX) - Still actively developed for AngularJS 1

* [AngularJS Material](https://material.angularjs.org/latest/) - Angular Material components by the AngularJS team

* [Angular Materialize](https://github.com/krescruz/angular-materialize) - Port of Materialize for AngjuarJS as directives



### Blazor

* [Blazorize](https://github.com/stsrki/Blazorise) - Component Library for Balzorise that has material theme

* [BlazorMaterial](https://github.com/BlazorExtensions/BlazorMaterial) - Port of Material Design Web Components to Blazor



### XAML

* [MaterialDesignInXamlToolkit](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit) - Library of components for XAML