Skip to main content

Getting started

m3-expressive-react is a Material Design 3 (Expressive) component library for React with a deliberately MUI-idiomatic API. Appearance, defaults, and motion follow the MD3 spec and Jetpack Compose material3.

Installation​

npm install m3-expressive-react

Requires React 18 or 19.

Usage​

Wrap your app in ThemeProvider and import the token stylesheet once:

import { ThemeProvider, Button } from 'm3-expressive-react'
import 'm3-expressive-react/styles.css'

export function App() {
  return (
    <ThemeProvider seedColor="#6750A4" mode="light">
      <Button variant="filled" onClick={() => console.log('clicked')}>
        Hello MD3
      </Button>
    </ThemeProvider>
  )
}
The stylesheet import is required

styles.css carries the design tokens (shape, motion, state, typescale) every component references. Colors come from ThemeProvider, which derives the full MD3 color-role map (light and dark) from your seedColor at runtime via Dynamic Color.

Next steps​