Using Material Web Components

1 minute read

M3 components


Back Next

Integrating Material Web components into Pensieve

Self-hosting: install @material/web

I want to try using Material Web 3 components on this site. First, let’s install it with NPM.

I created a package.json manifest file.

  "engines": {
    "node": "^18.17.1"
  "dependencies": {
    "@material/web": "^1.2.0"

Now, executing npm install will pull Material Web components sources into our working directory.

TIP: To install version-specific Node and NPM with the Node version manager n:

apt install npm
node --version
npm install -g n
n 18.17.1 && node --version

JavaScript: import components

Next, we create _material.js script to import the components that we need.

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

These import statements still need to be rolled up (expanded with the content of these imported files) before we can use them in the rest of our site, so we have to add the following in our package.json file.

  "devDependencies": {
    "@rollup/plugin-node-resolve": "^15.2.3",
    "rollup": "^4.12.0"
  "scripts": {
    "rollup": "rollup -p @rollup/plugin-node-resolve assets/js/_material.js -o assets/js/material.rollup.js",
    "build:js": "npm run rollup"

Running npm run build:js would create the output material.rollup.js file. This is what we need to actually use in our <head> script tag.

There are different routes to make this happen. The Minimal Mistakes theme that I am using defines a config for this. In our _config.yml file:

  - /assets/js/material.rollup.js # Generated by `npm run build:js`

Styling M3 components

M3 uses design tokens as an API for styling and customizing their components.

For instance, to change the typography of M3 components that I will use, I just need to add the following in this site’s main.scss file.

/*--- material web customizations ---*/
:root {
  --md-ref-typeface-brand: Roboto;
  --md-ref-typeface-plain: system-ui;
/*--- end material web customizations ---*/

Note: To make Roboto available, I also need to add the fonts in <head>.