Material Web Components

Material Web Components helps developers execute Material Design using web components.

Built on top of the Material Components Web project and LitElement, the Material Web Components enable a reliable development workflow to build beautiful and functional web projects.

Web Components can be seamlessly incorporated into a wide range of usage contexts. Whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Web Components into your site in a lightweight, idiomatic fashion.

Demos

Quick start

Note: This guide assumes you have npm installed locally.

To get started using one of the Material Web Components in your web application, simply:

1. npm install it

   npm install @material/mwc-button
   

2. Load the webcomponents polyfills (see the webcomponents polyfill Readme for more info).

3. import the element

   <script type="module">
     import {Button} from '@material/mwc-button';
   </script>
   

4. Use the element on the page

   <mwc-button label="Hi" icon="explore" raised></mwc-button>
   

Below are instructions for setting up project development.

1. git clone this repo
2. install dependencies by running npm run bootstrap
3. to run a development server: npm run dev (view the demos by accessing <dev server url>/demos/index.html)
4. to run tests: npm run test

Rebuild CSS for components

Components define their css using SASS. The SASS output is built into a javascript module which exports the component's styling as a (lit-html)[https://github.com/Polymer/lit-html] template.

To compile the component SASS run

npm run update-styling

Useful Links

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

Browser Support

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

• Chrome
• Safari
• Firefox
• IE 11/Edge
• Opera
• Mobile Safari
• Chrome on Android