https://github.com/grayhatdevelopers/material-web-components-react
Material Web Components for React ⚛
https://github.com/grayhatdevelopers/material-web-components-react
design-system lit lit-element lit-html material-design material-ui material-you react react-components ui-components ui-library web web-components web-components-library
Last synced: 2 months ago
JSON representation
Material Web Components for React ⚛
- Host: GitHub
- URL: https://github.com/grayhatdevelopers/material-web-components-react
- Owner: grayhatdevelopers
- License: mit
- Created: 2024-06-25T05:41:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-17T17:12:36.000Z (10 months ago)
- Last Synced: 2025-06-16T10:54:46.993Z (4 months ago)
- Topics: design-system, lit, lit-element, lit-html, material-design, material-ui, material-you, react, react-components, ui-components, ui-library, web, web-components, web-components-library
- Language: TypeScript
- Homepage: https://material-web-components-react.grayhat.studio
- Size: 1.11 MB
- Stars: 41
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Material Web Components for React
[](https://www.npmjs.com/package/material-web-components-react)
[](https://material-web.dev)
[](https://material-web-components-react.grayhat.studio)
A thin React wrapper over [@material/web](https://github.com/material-components/material-web/). Aims to be a locally-installable, accessible and customizable Material standard for React. Recommended to use with [MUI](https://mui.com/). Free. Open Source. **Looking for maintainers**.
## Installation
To use Material Web Components for React as a **library** in your project, run:
```sh
npm install material-web-components-react
```
## Usage
Here's a general example of how the components can be used:
```tsx
import React from 'react';
import Button from 'material-web-components-react/button';
function Example() {
return (
Click me
);
}
```
For a detailed reference on usage, you might want to check out the source code of the [NextJS demo](https://github.com/grayhatdevelopers/material-web-components-react/blob/main/apps/demo/src/app/page.tsx). It's simple!
Under the hood, this library simply uses the official [@material/web](https://github.com/material-components/material-web/) components. Visit [the official Material Web Components docs](https://github.com/material-components/material-web/blob/main/docs/intro.md) 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
- [x] Demo all components
- [x] Add all missing events
- [ ] [Need help] Add theming (design tokens) through Tailwind (i.e. remove all ts-ignores) (https://github.com/grayhatdevelopers/material-web-components-react/pull/2)
- [x] Resolve SSR/SSG issues, make compatible with NextJS (i.e. remove all dynamic imports)
- [x] Separate the demo from the actual UI code
- [x] Make installable as a package.
- [ ] [Need help] Make installable as code-in-project, like shadcn/ui, so developers have more control (https://github.com/grayhatdevelopers/material-web-components-react/pull/11)
- [ ] [Need help] Add better TypeScript support (https://github.com/grayhatdevelopers/material-web-components-react/issues/12)
- [ ] Sync with upstream (i.e. https://github.com/material-components/material-web/blob/main/docs/intro.md) through webhooks and automations
- [ ] Use [Copybara](https://github.com/google/copybara) (or good ol' GitHub webhooks) to automate syncing with upstream
- [ ] Use [lit-analyzer](https://www.npmjs.com/package/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
- [x] App Bars
- [x] Top App Bar
- [x] Bottom App Bar
- [x] Stack
- [x] Box
- [x] Navigation Rail
- [x] Container
- [x] Typography
### Credits
Huge shout out to Elizabeth Mitchell ([asyncLiz](https://github.com/asyncliz/)) and the rest of the Material Design team for their awesome Web Components implementation.
Thank you [Travis Reeder](https://github.com/treeder) 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](https://chatgpt.com/share/574a9601-8927-4992-884e-16c58f24a982)
Thanks for improving the demo:
- [TalhaHere12](https://github.com/TalhaHere12)
Thanks for building BottomSheet and Snackbar:
- [Aroonaongithhub](https://github.com/Aroonaongithhub/)