Material Web Components

Warning: These components are still a work in progress.

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's 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. Install each element you'd like to use:

   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>
   

Contributing guide

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 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