Material Web Components for React

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.

Installation

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

npm install material-web-components-react

Usage

Here's a general example of how the components can be used:

import React from 'react';
import Button from 'material-web-components-react/button';

function Example() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

For a detailed reference on usage, you might want to check out the source code of the NextJS demo. It's simple!

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

Local Development Setup 💻

1. Fork this repository

2. Clone your forked copy of the project

3. Change to the project directory

4. To get started, ensure you have pnpm installed globally, run the following command:

npm install -g pnpm

5. To install all project dependencies, run the following command:

pnpm i

6. To build the project, run the following commands (these needs to be done only once):

cd packages/ui

pnpm build

7. Return to the monorepo root:

cd ../../

8. To run the code locally, run the following code:

pnpm dev

This will run the demo app on http://localhost:3000, and whenever you update the library, the app should rebuild

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:

• ChatGPT

Thanks for improving the demo:

• TalhaHere12

Thanks for building BottomSheet and Snackbar:

• Aroonaongithhub