What's next for Material Web Components in 2024

[asyncLiz]

tl;dr our roadmap is updated for 2024!

This year we are working on accessibility, TSX support, expanded tokens, and three new components.

Happy new year everyone! 🥳

2023 was a big year for us: we launched @material/web 1.0 with 19 production-ready components. It was quite the sprint involving a full rewrite AND design system overhaul for Material 3! 😱

This year post-release, we're focusing on sustainable, helpful, and realistic goals. Here's what's coming next!

• Accessibility - Adhere to best practices and support more screen readers.
• TSX support - Improve the experience of using MWC with React.
• Expanded tokens - Make it easier to use tokens, like typography, in your own components; add shape and motion tokens for expressive design.
• New components - Adding card, snackbar, and navigation drawer.

Check out our updated roadmap for all the details! (there's some juicy bits on prototyping Material layouts 👀)

Thank you all for your continued feedback and support!

❤️ The Material Web team

[tve]

TSX support - Improve the experience of using MWC with React.

I just started using MWC with Vue 3 (and Vite) and so far it's a breeze. "It just works". I hope that improving the experience with React doesn't detract from this. The biggest issue I've run into is that the material-color-utilities are not up-to-date in what they produce. Also, the API docs are missing the slot information (I saw a ticket open on that). Something that would be great is to start a "using MWC with Vue" page and let the community provide additions (or perhaps this should start as a discussion thread).

[Daydreamer-riri]

Great! Thank you for your efforts.

[aszenz]

I would really a focus on using web components as replacement for traditional form elements rendered in server side frameworks like django.

Also importing individual components as esm would be nice to have.

[brandonsbque]

TSX support - Improve the experience of using MWC with React.

Hey guys! really love the components so far! I made a python script that will generate a file that other devs can paste into the root folder of their React project, and it would make all the components in @material/web available to use in React. This is all based on a workaround that one of the actual devs for @material/web suggested found here. I tried my best to write a read.me for it that would help users on how to use the script, and how to actually use the @material/web components in React.

Here's the repo! https://github.com/brandonsbque/custom-component-gen . Hopefully, I'm not breaking any Github or you guys' policy here by linking my repo, since this is the first time i've done something like this, but if so please let me know! I hope this helps others 😄 I would really appreciate it if you guys gave some stars on the repo too if you found it helpful 🤩

[treeder]

Does this mean we won't see the rest of the components until 2025?

[Daydreamer-riri]

@asyncLiz - candidly asking if there something the community can try to do to help the material team have some more support ?

The work here is stellar and what is built is really important.

On the other hand it is kind of frustrating to see a lack corporate support for this project.

I think so too. I would love to contribute to this project.

[asyncLiz]

@christophe-g thank you, I'm frustrated as well 😞

I know just commenting can feel helpless, but we need more people to make comments like yours that show why we need to support this library and how not doing so impacts Google's brand identity.

[asyncLiz]

Also, for anyone who wants to help out, start by joining the lit.dev/discord #material channel.

We can talk more there :)

[Danielnewheart]

Hi @asyncLiz Thanks for your effort. I really like this project and I believe google are connecting design and development. I would like to contribute but I cannot join your discord by the link you provide 🥲

[asyncLiz]

@Danielnewheart try https://lit.dev/discord

[floinay]

too slow

[lkraav]

Those looking for a full suite of top quality Nordic engineering open source components might want to check out https://github.com/vaadin/web-components

Waiting for the unknown here is a thankless game.

[christophe-g]

Indeed vaadin components are great - the grid in particular. Even though lit-based of vaadin are under an experimental flag, they still rely on Polymer. Ideally, I'd wish to only have a single templating dependency: lit.

[lkraav]

Indeed vaadin components are great - the grid in particular. Even though lit-based of vaadin are under an experimental flag, they still rely on Polymer. Ideally, I'd wish to only have a single templating dependency: lit.

Yes, Lit is in experimental phase, but majority of the components have pure Lit version available by now. I got my company to back some tens of hrs of this conversion work for cxl.com get in touch with Vaadin if you have the ability to join backers!

[nedrise27]

Those looking for a full suite of top quality Nordic engineering open source components might want to check out
https://github.com/vaadin/web-components

Waiting for the unknown here is a thankless game.

Does it have a license?

[treeder]

Hi all, since I have several projects that depend on these components and I can't wait for this project to start moving again, I forked it so my team and I can continue to develop it.

You can find it here for now: https://github.com/treeder/material

And you can start using it today with all the exact same components, see README.

[KyleRicardo]

With all due respect, is it possible that you have not completed the development of MD3 yet and MD4 has already been released.

[peschee]

There is no such thing as MD4 afaik.

[philippecgie]

I don't agree with the roadmap; why focus on accessibility, expanded tokens, ... when essential components like navigation drawer are not yet implemented? Without these, nobody can use the library...

Also, no need to focus on experience improvement with react, they have great libraries on their own. I recommend focusing on vanilla JS usage

[treeder]

Totally agree. I'm already moving away from this library based on this roadmap, none of those things help me. And 100% on the react comment, they don't need yet another library.

[anlexN]

Totally agree. This is roadmap's problem. very silly problem.

[dreamstar-enterprises]

Thanks for all the great efforts!

Any plans or supporting Material 3 Web Components for Angular too? E.g. Md-checkbox vs the older Mat-Checkbox, with all the new Material 3 customisations?

[floinay]

https://material.angular.io/guide/material-3