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
srcdirectory. This directory hosts all the code, while therootdirectory hosts all configurations. -
The core code that translates Material Design 3 to React can be found in the
src/components/materialdirectory.
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.