Skip to content
On this page

Roadmap

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

Current

Build new 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

Expand Material Design tokens

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.

Create TSX 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.

Follow accessibility best practices

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

Explore Material Design layouts

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.

Future

Planned new components

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 and spacing tokens

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.

Past

Cards and more

Completed in Q4 2023

Material 1.0

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
Roadmap has loaded