/material-web

Material Design Web Components

Primary LanguageSCSSApache License 2.0Apache-2.0

Material Web

IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release.

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.

Note: Looking for Material 2? <mwc-* components are now on the mwc branch.

Links

Roadmap

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

Beta components are mostly polished and ready for use.

Stable components are reviewed, documented, and API complete.

  • πŸ”΄ Not started
  • 🟑 In progress
  • 🟒 Complete

1.0 Components

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 🟒 🟒 πŸ”΄

1.1+ Components

These components are planned for release after 1.0.

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 πŸ”΄ πŸ”΄ πŸ”΄