Quick Start

For fast prototyping, use a CDN such as esm.run to load @material/web without installing it. The M3 Expressive elements are under @material/web/labs/gb/.

The quickest start is one script. labs/gb/all.js defines every md-gb-* element and adopts the M3 styles into the page. It loads every component, so use it for prototypes only. The import map is optional here; it lets you also import single files by path later. The script tags have no visible effect, so they are a plain block (Download & copy in the page tools menu copies them):

<script type="importmap">
  {"imports": {"@material/web/": "https://esm.run/@material/web/"}}
</script>
<script type="module" src="https://esm.run/@material/web/labs/gb/all.js"></script>

The same module, imported from a script, with a button that needs no other setup:

<md-gb-button color="filled">Next</md-gb-button>

import '@material/web/labs/gb/all.js';

To load only the elements a page uses, import each one. The import map resolves the bare specifiers (it is the only part of this setup that has no visible effect, so it is a plain block):

<script type="importmap">
  {"imports": {"@material/web/": "https://esm.run/@material/web/"}}
</script>

<md-gb-button color="filled">Next</md-gb-button>

import '@material/web/labs/gb/components/button/md-gb-button.js';
import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js';

adoptStyles(document, [m3Styles]);

For production, follow the install and build steps below.

Install Material web components using npm and node.

npm install @material/web

Import each element from @material/web/labs/gb/components/<component>/md-gb-<component>.js, and load the design tokens once with adoptStyles().

<label>
  Material 3 Expressive
  <md-gb-checkbox checked></md-gb-checkbox>
</label>
<md-gb-button color="filled">Next</md-gb-button>

import '@material/web/labs/gb/components/button/md-gb-button.js';
import '@material/web/labs/gb/components/checkbox/md-gb-checkbox.js';
import {adoptStyles} from '@material/web/labs/gb/styles/adopt-styles.js';
import {styles as m3Styles} from '@material/web/labs/gb/styles/m3.cssresult.js';

adoptStyles(document, [m3Styles]);

Use the <md-gb-component> tag in HTML markup. Each component page, such as Button, has more guidance.

<label>
  Material 3 Expressive
  <md-gb-checkbox checked></md-gb-checkbox>
</label>
<md-gb-button color="outlined">Back</md-gb-button>
<md-gb-button color="filled">Next</md-gb-button>

Bare module specifiers such as @material/web/... need a tool to resolve them until import maps are adopted. For a more in-depth guide, follow lit.dev's modern build for production.

Rollup with a plugin that resolves bare module specifiers bundles the entrypoint into one file.

npm install rollup @rollup/plugin-node-resolve
npx rollup -p @rollup/plugin-node-resolve index.js -o bundle.js

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