mui-m3-theme

Material Design 3 components, theme for MUI react components.

Original repo by limitkr is deprecated, this is a fork.

Demo

Storybook

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>
}

⚠️ IMPORTANT! You must import 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.