@symblight/wc-material

Material Design 3 web components built with Lit.

Work in progress — this package is not production ready and is actively being developed. APIs may change without notice.

Installation

npm install @symblight/wc-material lit
# or
pnpm add @symblight/wc-material lit

lit is a peer dependency and must be installed alongside this package.

Usage

Import all components

import "@symblight/wc-material";
import "@symblight/wc-material/theme/theme.css";

Import individual components (recommended)

Only load what you need — each component is a separate entry point:

import "@symblight/wc-material/button";
import "@symblight/wc-material/checkbox";
import "@symblight/wc-material/text-field";

Available imports

| Name | Import path | Components | Docs | | ------------------- | ------------------------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------- | | Avatar | @symblight/wc-material/avatar | <md-avatar> | README | | Badge | @symblight/wc-material/badge | <md-badge> | README | | Button | @symblight/wc-material/button | <md-button> | README | | Card | @symblight/wc-material/card | <md-card> | README | | Checkbox | @symblight/wc-material/checkbox | <md-checkbox> | README | | Chips | @symblight/wc-material/chips | <md-assist-chip>, <md-filter-chip>, <md-input-chip>, <md-suggestion-chip> | README | | Dialog | @symblight/wc-material/dialog | <md-dialog> | README | | FAB | @symblight/wc-material/fab | <md-fab> | README | | Icon | @symblight/wc-material/icon | <md-icon> | README | | Icon Button | @symblight/wc-material/icon-button | <md-icon-button> | README | | List | @symblight/wc-material/list | <md-list>, <md-list-item> | README | | Progress (circular) | @symblight/wc-material/progress-circular | <md-progress-circular> | README | | Progress (linear) | @symblight/wc-material/progress-linear | <md-progress-linear> | README | | Radio Button | @symblight/wc-material/radio-button | <md-radio-button> | README | | Select | @symblight/wc-material/select | <md-select> | README | | Switch | @symblight/wc-material/switch | <md-switch> | README | | Text Field | @symblight/wc-material/text-field | <md-text-field> | README |

Theme

Apply the base MD3 theme stylesheet in your app's entry CSS:

@import "@symblight/wc-material/theme/theme.css";

Dynamic color theming

To generate and apply a custom color palette at runtime, use @symblight/md-colors:

npm install @symblight/md-colors

import { generateTheme } from "@symblight/md-colors/client";

generateTheme({ sourceColor: "#6750A4", scheme: "dark" });

This injects --md-sys-color-* tokens directly onto :root, which the component styles pick up automatically.

import "@symblight/wc-material/button";
import "@symblight/wc-material/text-field";
import "@symblight/wc-material/checkbox";