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.
To use Material Web Components for React as a library in your project, run:
npm install material-web-components-reactUnder 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!
We're looking for maintainers and contributors!
- Make sure all native Web Components are properly working
- Demo all components
- Add all missing events
- Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores)
- 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.
- Make installable as code-in-project, like shadcn/ui, so developers have more control
- Add better TypeScript support
- 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
- Container
- Typography
- App Bars