https://github.com/aurelia-ui-toolkits/aurelia-mdc-web
Aurelia wrapper for Material Design (Web) Components
https://github.com/aurelia-ui-toolkits/aurelia-mdc-web
aurelia material-components material-components-web material-design material-design-components
Last synced: 3 days ago
JSON representation
Aurelia wrapper for Material Design (Web) Components
- Host: GitHub
- URL: https://github.com/aurelia-ui-toolkits/aurelia-mdc-web
- Owner: aurelia-ui-toolkits
- License: mit
- Created: 2020-06-30T01:02:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2026-05-04T02:01:21.000Z (about 1 month ago)
- Last Synced: 2026-06-06T01:07:55.973Z (10 days ago)
- Topics: aurelia, material-components, material-components-web, material-design, material-design-components
- Language: TypeScript
- Homepage: https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/
- Size: 109 MB
- Stars: 46
- Watchers: 9
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Aurelia MDC
[](https://badge.fury.io/js/%40aurelia-mdc-web%2Fbase)
[Demos, documentation and guides](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/)
Third-party integration incorporating [Google Material Components](https://github.com/material-components/material-components-web) for building beautiful, usable products using Material Design.
## Final release
The v9 is going to be the last major version of the bridge. Google is going to concentrate on [Material Web Components](https://github.com/material-components/material-web) from now on.
See [this comment](https://github.com/material-components/material-components-web/issues/7583#issuecomment-1079282375).
#### Quick Links
* [Getting Started](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/getting-started)
* [Changelog](https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/master/docs/CHANGELOG.md)
* [Documentation and demos](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/)
* [Skeleton application](https://github.com/aurelia-mdc-web/new/) (run `npx makes aurelia-mdc-web` to create a copy)
* [Dumber Gist Template](https://gist.dumber.app/?gist=ca0cfc47e375e4b37363eeb407eb2859)
* [Contributing](https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/master/CONTRIBUTING.md)
* [Developer guide](https://github.com/aurelia-ui-toolkits/aurelia-mdc-web/blob/master/docs/developer.md)
#### Sponsors
Huge thanks to the following sponsor
## Material Design Components
Using Google Material Components [foundations and adapters](https://github.com/material-components/material-components-web/blob/master/docs/integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).
| Component | Status | Demo |
| ---------- | ------- | :------: |
| banner | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/banner) |
| button | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/button) |
| card | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/card) |
| checkbox | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/checkbox) |
| chips | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/chips) |
| data-table | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/data-table) |
| dialog | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/dialog) |
| drawer | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/drawer) |
| elevation | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/elevation) |
| expandable | Available :boom: | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/expandable) |
| fab | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/fab) |
| form-field | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/form-field) |
| icon | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/icon) |
| icon-button | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/icon-button) |
| image-list | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/image-list) |
| layout-grid | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/layout-grid) |
| linear-progress | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/linear-progress) |
| list | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/list) |
| lookup | Available :boom: | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/lookup) |
| menu-surface | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/menu-surface) |
| menu | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/menu) |
| radio | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/radio) |
| ripple | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/ripple) |
| segmented-button | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/segmented-button) |
| select | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/select) |
| slider | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/slider) |
| snackbar | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/snackbar) |
| switch | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/switch) |
| tabs | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/tabs) |
| text-field | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/text-field) |
| tooltip | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/tooltip) |
| top-app-bar | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/top-app-bar) |
| tree-view | Available :boom: | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/tree-view) |
| typography | Available | [View](https://aurelia-ui-toolkits.github.io/aurelia-mdc-web/#/typography) |
#### WARNING
:boom: - Non-native, opinionated controls which will not be implemented in the original MDC but are required in most projects.
## Browser Support
- **IE 11** is not supported
## Thank you
* To [Arjen de Blok](https://github.com/arjendeblok) for the idea of wrapping MDC and coding hints!
* To [Dominic Carretto](https://github.com/trimox) for valuable insights, demo app structure, and markup files from [Angular MDC wrappers](https://github.com/trimox/angular-mdc-web)!
