Awesome Open Source
Awesome Open Source


master branch has been been soft-archived. All new work is being done at


Material Design for Web


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


  • 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

Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,154,707
Css (161,735
Button (18,669
Material (15,813
Overlay (4,889
Material Design (4,757
Aria (1,085
Divider (596