quick-start.md

Quick start

Install

Install Material web components using npm and node.

npm install @material/web

Import

Import element definitions from @material/web/<component>/<component-variant>.js.

// index.js
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/checkbox/checkbox.js';

Usage

Use the <component-name> tag in HTML markup. Refer to the component docs for more guidance on using each component.

Playground

<script type="module" src="./index.js"></script>

<label>
  Material 3
  <md-checkbox checked></md-checkbox>
</label>

<md-outlined-button label="Back"></md-outlined-button>
<md-filled-button label="Next"></md-filled-button>

Building

Material web components uses bare module specifiers that must be resolved with tools until import maps are adopted.

We recommend following lit.dev's modern build for production for a more in-depth build guide.

Rollup quick start

For a quick start, we recommend using Rollup to resolve bare module specifiers into a bundled file.

Install Rollup and a plugin to resolve bare module specifiers.

npm install rollup @rollup/plugin-node-resolve

Create a bundle from an entrypoint index.js file and use it in a <script> "src" attribute.

npx rollup -p @rollup/plugin-node-resolve index.js > bundle.js

<script src="./bundle.js"></script>