Material web components is a UI toolkit to build customizable and accessible web applications.
Material 3 is the latest version of Google's open-source design system.
Tip: Using Angular? We recommend using Angular Material components instead.
Resources
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
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 | ✅ | ✅ | 🟡 |
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 | ❌ | ❌ | ❌ |
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.