materialdesignweb

Material Design for Web

A standards-focused, zero-dependency implemention of Material Design 3 (Material You).

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

Quick links

Getting Started

• Getting started
• Theming
• Component index

Building Components

• Creating custom elements
• Observable properties reference
• State management (element-local)
• State management (MVP pattern)

Advanced

• Component manifest (CEM) — see custom-elements-manifest
• Custom elements manifest spec
• Contributing

Install via npm:

npm install @shortfuse/materialdesignweb

Use the CDN (zero-install):

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

Access exports via : const { CustomElement } = globalThis['@shortfuse/materialdesignweb'];

Import what you need (ESM):

import '@shortfuse/materialdesignweb'; // full bundle
// or
import Button from '@shortfuse/materialdesignweb/components/Button.js'; // single component

See theming options: docs/THEMING.md

Theming

• Use the CDN ?color= param for quick prototyping, or see docs/THEMING.md for runtime/build options.

Archive

The Material Design 1/2 version has been archived in the archive-md2 branch.