Material Components for the web

Material Components for the web (MDC Web) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Components for the web is the successor to Material Design Lite, and has 3 high-level goals:

• Production-ready components consumable in an a-la-carte fashion
• Best-in-class performance and adherence to the Material Design guidelines
• Seamless integration with other JS frameworks and libraries

  • Material Components for React: MDC Web integration for React (using foundations/adapters)

  • Material Web Components: MDC Web integration for Web Components (using vanilla components)

  • Additional third-party integrations

    • Preact Material Components
    • RMWC: React Material Web Components
    • Angular MDC
    • Blox Material: Angular Integration Library.
    • Vue MDC Adapter: MDC Web Integration for Vue.js (using foundations/adapters.)
    • Material Components Vue: MDC Web Integration for Vue.js (using vanilla components)
    • BalmUI: Next Generation Material UI for Vue.js
    • Ember Material Components: MDC Web integration for Ember (using vanilla components)

  • More coming soon! Feel free to submit a pull request adding your library to this list, so long as you meet our criteria.

MDC Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

Demos (updated with every release)

Note: Material Components Web follows semver and is still in version 0.x, which means it is regularly subject to breaking changes. We typically follow a 2-week release schedule which includes one minor release per month with breaking changes, and intermediate patch releases with bug fixes. A list of changes is always available in the CHANGELOG, and a tentative schedule of what we are working on next is available in the ROADMAP.

Quick start

Note: This guide assumes you have Node.js and npm installed locally.

Include CSS for a component

Note: This guide assumes you have webpack configured to compile Sass into CSS. See the getting started guide for pointers on how to configure webpack.

To include the Sass files for the Material Design button, install the Node dependency:

npm install @material/button

Then import the Sass files for @material/button into your application. You can also use Sass mixins to customize the button:

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

You also need to configure sass-loader to understand the @material imports used by MDC Web. Update your webpack.config.js by changing { loader: 'sass-loader' } to:

{
  loader: 'sass-loader',
  options: {
    includePaths: ['./node_modules']
  }
}

@material/button has documentation about the required HTML for a button. Update your application's HTML to include the MDC Button markup, and add the foo-button class to the element:

<button class="foo-button mdc-button">
  Button
</button>

This will produce a customized Material Design button!

Include JavaScript for a component

Note: This guide assumes you have webpack configured to compile ES2015 into JavaScript. See the getting started guide for pointers on how to configure webpack.

To include the ES2015 files for the Material Design ripple, install the dependency:

npm install @material/ripple

Then import the ES2015 file for @material/ripple into your application, and initialize an MDCRipple with a DOM element:

import {MDCRipple} from '@material/ripple/index';
const ripple = new MDCRipple(document.querySelector('.foo-button'));

Note: Import @material/ripple/index if you wish to transpile MDC Web's ES2015 sources as part of your build process. If your build toolchain is configured to only transpile your own sources, import @material/ripple instead, which will reference the distributed UMD module instead.

This will produce a Material Design ripple on the button!

Useful links

• Getting Started Guide
• All Components
• Demos
• Contributing
• Material.io (external site)
• Material Design Guidelines (external site)

Need help?

We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our Discord Channel.

Browser support

We officially support the last two versions of every major browser. Specifically, we test on the following browsers:

• Chrome on Android, Windows, macOS, and Linux
• Firefox on Windows, macOS, and Linux
• Safari on iOS and macOS
• Edge on Windows
• IE 11 on Windows

Thank you

Fast, reliable automated screenshot testing is generously provided by:

Free for open source projects!

Additional continuous integration services courtesy of:

• Travis CI
• Sauce Labs