gitmyhub

material-web

SCSS ★ 11k updated 1d ago

Material Design Web Components

Google's official Material Design 3 component library for the web, drop-in custom HTML elements like buttons, checkboxes, and text fields that work in any framework or plain HTML with built-in accessibility.

JavaScriptTypeScriptSCSSWeb Componentssetup: easycomplexity 2/5

Material Web is a library of ready-made interface components for building websites and web applications. It is maintained by Google and implements Material Design 3, which is Google's publicly documented system for how buttons, checkboxes, text fields, and other interface elements should look and behave. The components here are built as web components, a browser-native way of packaging reusable pieces of interface that works across different JavaScript frameworks or even plain HTML without any framework at all.

The library is published on npm under the name @material/web and can also be loaded directly from a content delivery network for quick prototyping without a build step. You add the script to your page, then use custom HTML tags like md-checkbox, md-radio, and md-outlined-text-field in your markup the same way you would use a native input element. The components handle their own styling and behavior, so you do not need to write CSS from scratch for each one.

Accessibility is a stated design goal. Each component is built to work correctly with keyboard navigation and assistive technologies like screen readers, following established accessibility standards.

One notable caveat in the README: the project is currently in maintenance mode, which means it is being kept running but is not actively receiving new features or major updates. The team has posted a discussion asking for new maintainers to take over the project. For teams using Angular specifically, the README suggests using Angular Material instead, which is a separate but related project that stays more actively maintained.

This library is intended for web developers and does not require any particular JavaScript framework, though it works alongside them.

Where it fits