Note

Name: clshortfuse/materialdesignweb
Brand: clshortfuse/materialdesignweb
SKU: project/clshortfuse/materialdesignweb
Rating: 4.43 (31 reviews)

master branch has been been soft-archived. All new work is being done at https://github.com/clshortfuse/materialdesignweb/tree/native

materialdesignweb

Material Design for Web

Demo

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

Getting started

npm: npm install @shortfuse/materialdesignweb

Core modules

Module	CSS-Only Support	Description	status
aria	❌	Handles ARIA attributes, ARIA roles, tabindexes, and keyboard interaction	preRC
document	✅	Applies color-scheme, standalone-window, and user agents detection	RC
overlay	✅	Applies overlay states to components	RC
ripple	✅	Applies press ripple on interactions	preRC
theme	✅	Applies ink and surface colors based on light/dark context	preRC
transition	❌	Transitions shape and content between elements	preRC

Component Modules

Component	Integrations	CSS-Only Support	Keyboard Support	ARIA Role	ARIA Attributes	Status
appbar	button	✅	N/A	❌	❌	beta
backdrop						planned
banner	button	✅	N/A	❌	❌	beta
bottomnav	bottomnavitem† overlay	❌	✅	tablist	aria-multiselectable aria-orientation	RC
bottomnavitem	overlay ripple	❌	✅	tab	aria-selected	RC
button	overlay ripple	✅	✅	button	aria-disabled‡ aria-pressed‡	stable
card	button divider	✅	N/A	❌	❌	preRC
chip	chipitem	✅	❌	❌	❌	alpha
chipitem	❌	❌	❌	❌	❌	alpha
datatable	button	✅	✅	grid	aria-selected	preRC
dialog	button	✅	✅	dialog	aria-modal	preRC
divider		✅		separator‡		preRC
elevation		✅				RC
fab	button†	✅	❌	❌	❌	beta
grid		✅		❌	❌	preRC
imagelist						use grid
layout		✅	❌	❌	❌	beta
list	listitem† listexpander	✅	✅	group list listbox radiogroup tree	aria-orientation	preRC
listcontent	overlay ripple	✅	✅	listitem link option radio treeitem	aria-checked aria-selected	preRC
listitem		✅	✅	treeitem none	aria-expanded aria-hidden	preRC
listsecondary		✅	✅	none‡		preRC
menu	divider menuitem†	✅	✅	menu	aria-hidden	preRC
menuitem	overlay ripple	✅	✅	menuitem menuitemradio menuitemcheckbox	aria-disabled aria-checked	stable
navdrawer						use layout
progress		✅		❌	❌	beta
selection		✅	✅	checkbox‡ radio‡	aria-checked aria-disabled	preRC
sidesheet						use layout
slider		✅	❌	❌	❌	alpha
snackbar	button	✅	✅	alert	aria-hidden	RC
tab	tablist tabcontent	❌				RC
tabcontent	tabpanel†	❌	✅			RC
tabitem	overlay ripple	❌	✅	tab	aria-selected	RC
tablist	tabitem† overlay	❌	✅	tablist	aria-multiselectable aria-orientation	RC
tabpanel		❌	✅	tabpanel	aria-expanded aria-hidden	RC
textfield	list	✅	✅	❌	❌	preRC
tooltip		✅		❌	❌	beta
type		✅				RC

Adapter classes

Adapter	Components	Status
datatable	button datatable†	preRC
dom		preRC
list	domadapter† listitem†	preRC
search	list† textfield†	preRC

Legend

planned - Planned for later
draft - Not yet functional
alpha - Partially working
beta - Working but incomplete
preRC - Needs minor changes
RC - Needs testing as-is
stable - Production-ready
† - Required
‡ - Apply manually