Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 5,019 Commits
.github		.github
button		button
catalog		catalog
checkbox		checkbox
chips		chips
color		color
dialog		dialog
divider		divider
docs		docs
elevation		elevation
fab		fab
field		field
focus		focus
icon		icon
iconbutton		iconbutton
internal		internal
labs		labs
list		list
menu		menu
migrations/v2		migrations/v2
progress		progress
radio		radio
ripple		ripple
scripts		scripts
select		select
slider		slider
switch		switch
tabs		tabs
testing		testing
textfield		textfield
tokens		tokens
typography		typography
.gitignore		.gitignore
.release-please-manifest.json		.release-please-manifest.json
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
all.ts		all.ts
commitlint.config.js		commitlint.config.js
common.ts		common.ts
package-lock.json		package-lock.json
package.json		package.json
release-please-config.json		release-please-config.json
tsconfig.json		tsconfig.json
web-test-runner.config.js		web-test-runner.config.js

Repository files navigation

Material Web

@material/web is a library ofweb componentsthat helps build beautiful and accessible web applications. It usesMaterial 3, the latest version of Google'sopen-source design system.

Note:MWC is in maintenance mode pending new maintainers.

Resources

Quick start

Tip: Using Angular? We recommend usingAngular Material componentsinstead.

This code snippet is a buildless example that loads@material/web from a CDN.Check out thequick start guide to install and buildfor production.

<head><linkhref="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"rel="stylesheet"><scripttype="importmap">{"imports":{"@material/web/":"https://esm.run/@material/web/"}}</script><scripttype="module">import'@material/web/all.js';import{stylesastypescaleStyles}from'@material/web/typography/md-typescale-styles.js';document.adoptedStyleSheets.push(typescaleStyles.styleSheet);</script></head><body><h1class="md-typescale-display-medium">Hello Material!</h1><form><pclass="md-typescale-body-medium">Check out these controls in a form!</p><md-checkbox></md-checkbox><div><md-radioname="group"></md-radio><md-radioname="group"></md-radio><md-radioname="group"></md-radio></div><md-outlined-text-fieldlabel="Favorite color"value="Purple"></md-outlined-text-field><md-outlined-buttontype="reset">Reset</md-outlined-button></form><style>form {display: flex;flex-direction: column;align-items: flex-start;gap:16px;    }</style></body>