Roadmap

This roadmap describes current, future, and past goals for Material Web Components.

Planned for 2024

One of our core goals is to provide Material Design components for the web. These are the components we are currently working on.

• Card
• Navigation drawer
• Snackbar

Planned for Q1 2024

We are adding shape and motion system tokens to support building expressive Material experiences.

We also want to make it easier to use Material Design tokens, such as applying Material typescale, shape, and color to your own components.

Planned for Q1 2024

TSX is a popular language extension for frameworks like React. We want to make it easier and more seamless to use Material Web Components in TSX.

Planned for Q2 2024

Everyone should be able to access and enjoy the web. We want our components to help others build accessible experiences.

We are working on supporting all of the following screen readers:

• VoiceOver
• Talkback
• ChromeVox
• JAWS
• NVDA

Planned for Q4 2024

Components are only part of the story to build fully expressive Material Design applications. We want to explore ways to support building applications that follow Material's layout patterns.

These are components we want to build next.

• Autocomplete
• Badge
• Banner
• Bottom app bar
• Bottom sheet
• Data table
• Date picker
• Navigation bar
• Navigation rail
• Search
• Segmented button
• Time picker
• Top app bar
• Tooltip

Density allows components to take up less vertical space for larger displays. While we have some spacing tokens already, we need a comprehensive spacing system to fully support density across components.

Completed in Q4 2023

• Components
  • ✅ Card preview
• Features
  • 🟡 Prevent event default behavior
    • We fixed lots of bugs, but there's still ways we can improve.
  • ✅ Size tracking
  • ✅ Docs and examples

Completed in Q3 2023

• Features
  • ✅ Color theming
  • ✅ Typography theming
• Components
  • ✅ Button
  • ✅ FAB
  • ✅ Icon button
  • ✅ Checkbox
  • ✅ Chips
  • ✅ Dialog
  • ✅ Divider
  • ✅ Elevation
  • ✅ Focus ring
  • ✅ List
  • ✅ Menu
  • ✅ Progress indicators
  • ✅ Radio
  • ✅ Ripple
  • ✅ Select
  • ✅ Slider
  • ✅ Switch
  • ✅ Tabs
  • ✅ Text field