Material Design 3 components, theme for MUI react components.
Original repo by limitkr is deprecated, this is a fork.
# using npm:
npm i @dotdirewolf/mui-m3-theme
# or using yarn package manager:
yarn add @dotdirewolf/mui-m3-themeYou can testing on storybook. just simply run:
yarn storybookimport 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.
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>
)
}-
Buttons
- Common Buttons
- FAB
- Extended Fab
- Icon Buttons
- Segmented Buttons
-
Cards
-
Chips
-
Dialogs
-
Navigation Drawer
-
Navigation Rail
Work In Process. Preview is here.