README

mui-m3-theme

Material Design 3 components, theme for MUI react components.

Demo

Quick Start

Install

# using npm:
npm i mui-m3-theme
# or using yarn package manager:
yarn add 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

Components	Status	Version
Buttons	🚧WIP	v0.1
Cards	🚧WIP	v0.2
Chips	🚧WIP	v0.2
Dialogs	🚧WIP	v0.2
Navigation bar	⚡️On Progress	-
Navigation drawer	🚧WIP	v0.2
Navigation rail	🗒Planned	-
Top app bar	🗒Planned	-
Widgets	❌	-

MUI Components

There are no specific plans yet.

Tutorials

Work In Process. Preview is here.

Usage no npm install needed!