Install lit-material

Link the tokens once

Every component reads its colours, type and shapes from CSS custom properties in @lit-material/tokens. Load the stylesheet once per page:

npm install @lit-material/tokens

<link rel="stylesheet" href="node_modules/@lit-material/tokens/css/index.css" />

With a bundler, import it from your entry file instead: import "@lit-material/tokens/css/index.css";

Install the components you use

Each component is a package of its own, so you install a button without installing a component library:

npm install @lit-material/button @lit-material/text-field

A package that holds several elements also has one entry point per element. @lit-material/text-field registers the text field, textarea, number field and input group; @lit-material/text-field/text-field.js registers only the text field.

Use them as HTML

import "@lit-material/button";
import "@lit-material/text-field/text-field.js";

<lit-material-text-field label="Email" type="email" required></lit-material-text-field>
<lit-material-button variant="filled">Save</lit-material-button>

Form fields take part in a surrounding <form> through ElementInternals, so FormData, validation and reset work as they do with native inputs.

Light and dark mode

The tokens follow the visitor's system setting. Color scheme adds a toggle that remembers a choice, and the theme builder makes a palette from one seed colour.

Starting a whole app

npm create lit-material-app my-app scaffolds a Vite app with routing, a store and a few pages. See Create an app.