Welcome to the repository for integrating Material Design 3 into React using the @lit/react package. This project is built using the Next.js framework and serves as a bridge to use Material Design 3 in React applications.
This repository demonstrates how to use Material Design 3 web components in a React project. The components are sourced from the @material/web
package, which is the web implementation of Material Design 3. Since there's no native support for React yet, this project aims to fill that gap.
-
The project follows a standard NextJs project, including the use of a
src
directory. This directory hosts all the code, while theroot
directory hosts all configurations. -
The core code that translates Material Design 3 to React can be found in the
src/components/material
directory.
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/Gryt-chat/material-gryt-3.git cd material-gryt-3
-
Install the dependencies using Yarn:
yarn install
-
Run the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can explore the components in the src/components/material
directory to see how Material Design 3 is being translated to React. Example usage can be found in the page.tsx
files. Feel free to use and modify these components in your own projects.
This project is part of the open-source initiative called Gryt. Learn more about Gryt at https://gryt.chat. This repository is temporary and will be archived once the code is integrated into the library @gryt/ui
. Future development will continue in the @gryt/ui repository.
Your feedback is greatly appreciated! If you encounter any issues or have suggestions for improvements, please open an issue on our issues page.