Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/webdenim/awesome-material-components

A curated list of awesome projects related to Google's Material Design Components
https://github.com/webdenim/awesome-material-components

List: awesome-material-components

android awesome awesome-list google-material ios list material material-components material-design mdc mdc-android mdc-ios mdc-web resources ui ui-design web

Last synced: 16 days ago
JSON representation

A curated list of awesome projects related to Google's Material Design Components

Host: GitHub
URL: https://github.com/webdenim/awesome-material-components
Owner: webdenim
License: cc-by-sa-4.0
Created: 2017-12-06T15:19:13.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2018-11-02T09:27:39.000Z (about 6 years ago)
Last Synced: 2024-05-19T17:31:28.002Z (7 months ago)
Topics: android, awesome, awesome-list, google-material, ios, list, material, material-components, material-design, mdc, mdc-android, mdc-ios, mdc-web, resources, ui, ui-design, web
Homepage:
Size: 18.6 KB
Stars: 17
Watchers: 3
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

ultimate-awesome - awesome-material-components - A curated list of awesome projects related to Google's Material Design Components. (Other Lists / Monkey C Lists)

README

        # Awesome Material Components [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20Awesome%20Material%20Components%20-%20curated%20list%20of%20projects%20based%20on%20Google%27s%20Material%20Components%20%E2%86%92&url=https://github.com/webdenim/awesome-material-components&via=webdenim&hashtags=materialdesign,frontend,webdesign,webdev,mobiledev,androiddev,iosdev)

> A curated list of awesome projects related to Google's Material Components.

Awesome Material Components is a collection of resources related to the official Google's

[Material Components library](https://material.io/components/). It's opposed to the community-based

implementations of Material Design featured in

[another list](https://github.com/sachin1092/awesome-material).

The purpose of this list is to increase the adoption of Material Components by sharing

the knowledge about its community. So, if you have an interesting MDC-based project or tutorial,

feel free to [contribute](CONTRIBUTING.md).

Please don't forget to star this repo and

[share it](https://twitter.com/intent/tweet?text=Check%20out%20Awesome%20Material%20Components%20-%20curated%20list%20of%20projects%20based%20on%20Google%27s%20Material%20Components%20%E2%86%92&url=https://github.com/webdenim/awesome-material-components&via=webdenim&hashtags=materialdesign,frontend,webdesign,webdev,mobiledev,androiddev,iosdev)

among your friends! Thank you!

## Contents

- [MDC Web](#material-components-web-mdc-web)

  - [MDC Web Resources](#mdc-web-resources)

  - [MDC Web Framework Integrations](#mdc-web-framework-integrations)

  - [Projects Using MDC Web](#projects-using-mdc-web)

- [MDC Android](#material-components-android-mdc-android)

  - [MDC Android Resources](#mdc-android-resources)

- [MDC iOS](#material-components-ios-mdc-ios)

  - [MDC iOS Resources](#mdc-ios-resources)

## Material Components Web (MDC Web)

### MDC Web Resources

- Documentation

  - [Official Website](https://material.io/components/web/)

  - [Official Documentation](https://material.io/components/web/docs/)

  - [Official GitHub Repo](https://github.com/material-components/material-components-web)

  - [StackOverflow Questions](https://stackoverflow.com/questions/tagged/material-components+web)

- Tutorials

  - [CodeLabs - Building Beautiful Sites Faster with Material Components for the web](https://codelabs.developers.google.com/codelabs/mdc-web/index.html).

- Utilities

  - [shuhei/material-colors](https://github.com/shuhei/material-colors) - Material Design color palette in different formats (JS, JSON, Less, Sass, etc.).

  - [webdenim/stylelint-config-material](https://github.com/webdenim/stylelint-config-material) - Stylelint config for Material Components Web.

  - [MDC Web on Fossies](https://fossies.org/diffs/material-components-web/) - The visual way to track the changes in MDC Web library.

### MDC Web Framework Integrations

* Angular

  - [trimox/angular-mdc-web](https://github.com/trimox/angular-mdc-web) - Angular Material Design Components.

  [Demo](https://trimox.github.io/angular-mdc-web) - [Dev chat](https://gitter.im/angular-mdc/Lobby)

  - [src-zone/material](https://github.com/src-zone/material)

* Angular.js

  - [fintechstudios/angularjs-mdc](https://github.com/fintechstudios/angularjs-mdc)

* Aurelia

  - [ullfis/aurelia-mdc-bridge](https://github.com/ullfis/aurelia-mdc-bridge)

* Ember

  - [secondstreet/ember-material-components-web](https://github.com/secondstreet/ember-material-components-web)

* Preact

  - [prateekbh/preact-material-components](https://github.com/prateekbh/preact-material-components)

* React

  - [material-components/material-components-web-react](https://github.com/material-components/material-components-web-react) - React.js wrapper by Material Components team.

  - [jamesmfriedman/rmwc](https://github.com/jamesmfriedman/rmwc) - A thin React wrapper, using foundation classes.

  [Demo](https://jamesmfriedman.github.io/rmwc/) - [Dev chat](https://gitter.im/react-material-web-components/Lobby)

  - [react-mdc/react-material-components-web](https://github.com/react-mdc/react-material-components-web) - React.js wrapper typed with TypeScript.

  - [kradio3/react-mdc-web](https://github.com/kradio3/react-mdc-web) - Simple React.js wrapper, not using foundation classes.

  - [react-material-design/react-material-design](https://github.com/react-material-design/react-material-design)

  - [gutenye/react-mc](https://github.com/gutenye/react-mc)

* Vue

  - [stasson/vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter) - Vue.js wrapper, using foundation classes.

  [Demo](https://stasson.github.io/vue-mdc-adapter) - [Dev chat](https://gitter.im/vue-mdc-adapter/Lobby)

  - [matsp/material-components-vue](https://github.com/matsp/material-components-vue) - Simple Vue.js wrapper, not using foundation classes.

  - [balmjs/ui-vue](https://github.com/balmjs/ui-vue)

* Elm

  - [aforemny/elm-mdc](https://github.com/aforemny/elm-mdc) - Elm port of the Material Components for the Web.

### Projects Using MDC Web

- Open Source

  - [GoogleChromeLabs/sample-currency-converter](https://github.com/GoogleChromeLabs/sample-currency-converter) - A sample currency conversion Progressive Web App.

  - [vuegg/vuegg](https://github.com/vuegg/vuegg) - Vue.js GUI generator.

## Material Components Android (MDC Android)

### MDC Android Resources

- Documentation

  - [Official Website](https://material.io/components/android/)

  - [Official Documentation](https://material.io/components/android/docs/)

  - [Official GitHub Repo](https://github.com/material-components/material-components-android/blob/master/docs/index.md)

  - [StackOverflow Questions](https://stackoverflow.com/questions/tagged/material-components+android)

- Tutorials

  - [CodeLabs - Building Beautiful Apps Faster with Material Components on Android](https://codelabs.developers.google.com/codelabs/mdc-android/index.html)

  - [CodeLabs - Building Beautiful Apps Faster with Material Components on Android (Kotlin)](https://codelabs.developers.google.com/codelabs/mdc-android-kotlin/index.html)

## Material Components iOS (MDC iOS)

### MDC iOS Resources

- Documentation

  - [Official Website](https://material.io/components/ios/)

  - [Official Documentation](https://material.io/components/ios/docs/)

  - [Official GitHub Repo](https://github.com/material-components/material-components-ios)

  - [StackOverflow Questions](https://stackoverflow.com/questions/tagged/material-components+ios)

- Tutorials

  - [CodeLabs - Building Beautiful Apps Faster with Material Components on iOS](https://codelabs.developers.google.com/codelabs/mdc-ios/index.html)

  - [CodeLabs - Building Beautiful Apps Faster with Material Components on iOS in Swift](https://codelabs.developers.google.com/codelabs/mdc-ios-swift/index.html)

  - [raywenderlich.com - Google Material Design Tutorial for iOS: Getting Started](https://www.raywenderlich.com/170353/introduction-google-material-design-ios)

## Contribute

Contributions welcome! Please read the [contribution guidelines](CONTRIBUTING.md) first.

## License

[![CC-BY-SA-4.0](https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg)](https://creativecommons.org/licenses/by-sa/4.0/legalcode)