mui-m3-theme
Material Design 3 components, theme for MUI react components.
Original repo by limitkr is deprecated, this is a fork.
Demo
Quick Start
Install
# using npm:
npm i @dotdirewolf/mui-m3-theme
# or using yarn package manager:
yarn add @dotdirewolf/mui-m3-theme
Storybook Preview
You can testing on storybook. just simply run:
yarn storybook
Usage
import React from "react";
import { ThemeProvider, CssBaseLine } from "@mui/material";
import { MaterialDesign3Theme, Button } from "mui-m3-theme";
export default function App() {
<ThemeProvider theme={MaterialDesign3Theme}>
<CssBaseline />
<Button color="primary" variant="elevated">Elevated button</Button>
</ThemeProvider>
}
MaterialDesign3Theme
or custom theme generated by function createMaterialDesign3Theme()
from packages, and need to use the ThemeProvider
component in order to inject a theme.
If you want to use custom color theme, refer to the 'Create Your Theme' section below.
Create Your Theme
import React from "react";
import { ThemeProvider, CssBaseline } from "@mui/material";
import {
createM3Palette,
unstable_createMaterialDesign3Theme as createMaterialDesign3Theme,
Button,
RGBColor,
} from "mui-m3-theme";
export default function App() {
const [rgbColor, setRgbColor] = React.useState<RGBColor>({
r: 103,
g: 80,
b: 164,
a: 1,
});
const m3Palette = createM3Palette(rgbColor);
const myTheme = createMaterialDesign3Theme(m3Palette);
return (
<ThemeProvider theme={myTheme}>
<CssBaseline />
<Button variant="elevated" color="primary">
Elevated button
</Button>
</ThemeProvider>
)
}
Status
-
Material Design 3 Components
-
[x] Buttons
- [x] Common Buttons
- [x] FAB
- [x] Extended Fab
- [ ] Icon Buttons
- [ ] Segmented Buttons
-
[x] Cards
-
[x] Chips
-
[x] Dialogs
-
[x] Navigation Drawer
-
[x] Navigation Rail
Tutorials
Work In Process. Preview is here.