/material-web

Material Design Web Components

Primary LanguageTypeScriptApache License 2.0Apache-2.0

Material Web

Material Web is Google’s UI toolkit for building beautiful, accessible web applications.

Material Web is implemented as a collection of web components. Material 3 is the latest version of Google’s open-source design system.

Tip: Check out the quick start guide to jump in as well as the documentation site.

Roadmap

Alpha components are in-development and may have many frequent breaking changes.

Beta components are mostly polished and ready for use, but may still have breaking changes.

Stable components are reviewed, documented, and API complete.

  • ❌ Not started
  • 🟑 In progress
  • βœ… Complete

v1.0.0 (2023)

Component Alpha Beta Stable
Button βœ… βœ… 🟑
FAB βœ… βœ… ❌
Icon button βœ… βœ… ❌
Checkbox βœ… βœ… βœ…
Chips βœ… βœ… ❌
Dialog βœ… βœ… ❌
Divider βœ… βœ… βœ…
Elevation βœ… βœ… βœ…
Focus ring βœ… βœ… βœ…
Field βœ… βœ… 🟑
Icon βœ… βœ… ❌
List βœ… βœ… ❌
Menu βœ… βœ… ❌
Progress indicator (circular) βœ… βœ… βœ…
Progress indicator (linear) βœ… βœ… 🟑
Radio button βœ… βœ… 🟑
Ripple βœ… βœ… βœ…
Select βœ… βœ… ❌
Slider βœ… βœ… ❌
Switch βœ… βœ… 🟑
Tabs βœ… βœ… ❌
Text field βœ… βœ… 🟑

Future

These features are planned for a future release.

Component Alpha Beta Stable
Autocomplete ❌ ❌ ❌
Badge 🟑 ❌ ❌
Banner ❌ ❌ ❌
Bottom app bar ❌ ❌ ❌
Bottom sheet ❌ ❌ ❌
Segmented button 🟑 ❌ ❌
Card ❌ ❌ ❌
Data table ❌ ❌ ❌
Date picker ❌ ❌ ❌
Navigation bar 🟑 ❌ ❌
Navigation drawer 🟑 ❌ ❌
Navigation rail ❌ ❌ ❌
Search ❌ ❌ ❌
Snackbar ❌ ❌ ❌
Time picker ❌ ❌ ❌
Tooltip ❌ ❌ ❌
Top app bar ❌ ❌ ❌

Browser support

This project aims to support the latest two major versions of browsers at the time of each release.

Current browsers and versions supported:

Browser Version
Chrome 112 +
Edge 112 +
Firefox 113 +
Safari* 16.4 +

* previous versions of Safari may be supported with an ElementInternals polyfill.