https://github.com/lfernando2091/react-m3
React Material 3 Theme
https://github.com/lfernando2091/react-m3
m3 material-ui react
Last synced: 3 months ago
JSON representation
React Material 3 Theme
- Host: GitHub
- URL: https://github.com/lfernando2091/react-m3
- Owner: lfernando2091
- Created: 2024-10-19T19:33:18.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-13T03:54:16.000Z (6 months ago)
- Last Synced: 2026-01-13T06:51:01.604Z (6 months ago)
- Topics: m3, material-ui, react
- Language: TypeScript
- Homepage: https://lfernando2091.github.io/react-m3/
- Size: 343 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactM3 Theme
This project has an [npm library](https://www.npmjs.com/package/@react-m3/m3) for [Material 3](https://m3.material.io/) theme, so you can add to your project and play-around this theme
created on the top of `@mui/material`.
```shell
npm i @react-m3/m3
```
## Apply this custom theme in your project
```typescript jsx
import { useMemo } from 'react';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { getPalette, getTheme } from '@react-m3/m3';
const color = "#6750a4";
export const MyCustomTheme = () => {
const m3Theme = useMemo(() => {
const palette = getPalette(color);
return getTheme('light', palette);
}, [color]);
return (
{/* Call your app component here */}
);
}
```
> [!NOTE]
> Open the next [StackBlitz Example.](https://stackblitz.com/edit/react-m3-theme?file=src%2FApp.tsx)
> This project is an extension from the original repository created by [ZakAlbert](https://github.com/ZakAlbert)