materialdesignweb

Material Design 3 (Material You) Web Components — standards‑focused and zero‑dependency.

Live demo: https://clshortfuse.github.io/materialdesignweb/ Samples: https://clshortfuse.github.io/materialdesignweb/samples/

Use the CDN (zero-install)

<script src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
<mdw-button>Hello World</mdw-button>

CDN theming params: color, custom, lightness, resetCSS.

Access exports via globalThis['@shortfuse/materialdesignweb']:

const { CustomElement } = globalThis['@shortfuse/materialdesignweb'];

Import what you need (ESM)

npm install @shortfuse/materialdesignweb

Full bundle:

import '@shortfuse/materialdesignweb';

Single component:

import Button from '@shortfuse/materialdesignweb/components/Button.js';

Support

Compatibility is kept for as long possible by including browser-version-based patches. Ultimately, compatiblity may be dropped as new features get added. Bugs present in supported browsers should always be fixed.

| Feature | Chrome | Edge | Firefox | Safari | | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ShadowRoot | 53 | 79 | 63 | 10 | | WeakRef | 84 | 84 | 79 | 14.1 | | :where() | 88 | 88 | 78 | 14 | | | | | | | | Array.at† | 92 | 92 | 90 | 15.4 | | replaceChildren† | 84 | 86 | 79 | 14.1 | | ElementInternals† | 77 | 79 | 93 | 16.4 | | delegatesFocus† | 53 | 79 | 94 | 15 | | AdoptedStyleSheets* | 73 | 79 | 101 | 16.4 | | CSS container queries* | 106 | 106 | 110 | 16.0 | | | | Compatibility | 88 | 88 | 78 | 16.4 | | Support | Latest ChromeOS LTS Release | Microsoft Edge Extended Stable Channel | ESR 115 | Last 2 Versions | | Status | | | | |

*Optional

†Can be polyfilled

Notes:

• Compatibility may be extended via polyfills (not included)

Documentation

Material Design Web (MDW) is components-first. If you just want to build a UI, start with the component docs and use HTML only — no custom JavaScript required.

1) Use the components

• Getting started
• Component library overview
• Layout
• Typography
• Controls & inputs
• Navigation
• Feedback & overlays
• Content & surfaces
• Component list

2) Theming

• Theming overview

3) Samples

• Samples index

4) Advanced: extend the core system (JavaScript)

Use these only if you need custom behavior, state models, or new components.

• Core overview
• Custom elements
• CustomElement API
• Observable properties
• State patterns
• Mixins
• Core modules

5) Reference

• API reference
• Generated artifacts (API + types) are published to npm on release.

6) Contributing

• Contributing