Skip to content
This repository has been archived by the owner on Apr 11, 2023. It is now read-only.
/ mui-m3-theme Public archive

Material Design 3(Material You) theme for MUI react components

License

Notifications You must be signed in to change notification settings

limitkr/mui-m3-theme

Repository files navigation

mui-m3-theme

Material Design 3 components, theme for MUI react components.

⚠️Deprecated!

This project has been deprecated. The MUI(previously Material-UI) team is preparing to support Material Design 3(Material You) in MUI V6.

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

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 -

There are no specific plans yet.

Tutorials

Work In Process. Preview is here.