https://github.com/feightwywx/mui-m3-theme

Material Design 3(Material You) theme for MUI react components
https://github.com/feightwywx/mui-m3-theme

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/feightwywx/mui-m3-theme
• Owner: feightwywx
• License: mit
• Created: 2022-09-29T13:30:39.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-06T16:10:32.000Z (almost 2 years ago)
• Last Synced: 2024-09-17T18:05:46.278Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 396 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# mui-m3-theme

[Material Design 3](https://m3.material.io/) components, theme for [MUI](https://github.com/mui-org/material-ui) react components.

[Original repo by limitkr](https://github.com/limitkr/mui-m3-theme) is deprecated, this is a fork.

## Demo

[Storybook](https://www.chromatic.com/library?appId=6374d9077d737a7672125183)

## Quick Start

### Install

```bash

# 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:

```bash

yarn storybook

```

### Usage

```tsx

import React from "react";

import { ThemeProvider, CssBaseLine } from "@mui/material";

import { MaterialDesign3Theme, Button } from "mui-m3-theme";

export default function App() {

  

    

    Elevated button

  

}

```

⚠️ 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'](#create-your-theme) section below.

## Create Your Theme

```tsx

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({

    r: 103,

    g: 80,

    b: 164,

    a: 1,

  });

  const m3Palette = createM3Palette(rgbColor);

  const myTheme = createMaterialDesign3Theme(m3Palette);

  return (

    

      

      

        Elevated button

      

    

  )

}

```

## Status

- ### [Material Design 3 Components](https://m3.material.io/components/all-buttons)

- [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](https://github.com/feightwywx/mui-m3-theme/wiki/Tutorials).