Skip to content

Latest commit

 

History

History
69 lines (48 loc) · 3.61 KB

README.md

File metadata and controls

69 lines (48 loc) · 3.61 KB
Raw

Material Web Components for React

npm version release docs docs

A thin React wrapper over @material/web. Aims to be a locally-installable, accessible and customizable Material standard for React. Recommended to use with MUI. Free. Open Source. Looking for maintainers.

hero

Installation

To use Material Web Components for React as a library in your project, run:

npm install material-web-components-react

Documentation

Under the hood, this library simply uses the official @material/web components. Visit the official Material Web Components docs to learn how to use those components. The props remain the same!

Contributing

We're looking for maintainers and contributors!

Roadmap 🚀

  • Make sure all native Web Components are properly working
    • Demo all components
    • Add all missing events
    • [Need help] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores) (#2)
  • Resolve SSR/SSG issues, make compatible with NextJS (i.e. remove all dynamic imports)
  • Separate the demo from the actual UI code
  • Make installable as a package.
  • [Need help] Make installable as code-in-project, like shadcn/ui, so developers have more control (#11)
  • [Need help] Add better TypeScript support (#12)
  • Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations
    • Use Copybara (or good ol' GitHub webhooks) to automate syncing with upstream
    • Use lit-analyzer to see which Web Components changed. Perhaps mix with an LLM to compare existing and newly autogenerated code.
    • Create a PR with the new Component code.
  • Mix this library with Tailwind and BaseUI in order to complete missing Components which may prove useful for building production applications
    • App Bars
      • Top App Bar
      • Bottom App Bar
    • Stack
    • Box
    • Navigation Rail
    • Container
    • Typography

Credits

Huge shout out to Elizabeth Mitchell (asyncLiz) and the rest of the Material Design team for their awesome Web Components implementation.

Thank you Travis Reeder for your Web Component implementation of Navigation Rail. I had to copy it to this project. I couldn't use yours directly because it would import @material/web again and bring conflicts.

Thanks for making the crappy, brain-dead wrapper components:

Thanks for improving the demo:

Thanks for building BottomSheet: