@modulify/m3-react

Material Design 3 components for React.

The logo is included in this package as @modulify/m3-react/assets/logo.svg and @modulify/m3-react/assets/logo.png. Artwork attribution.

Installation

yarn add @modulify/m3-react @modulify/m3-foundation

The package expects React, React DOM, react-transition-group, and react-transition-state to be provided by the application. Import the shared foundation stylesheet once in the application entrypoint:

import '@modulify/m3-foundation/styles.css'

Components remain available from the package root and can also be imported from the dedicated components layer. Hooks are available from their own layer:

import { M3Button } from '@modulify/m3-react/components'
import { useBreakpoint } from '@modulify/m3-react/hooks'

export const SaveButton = () => {
  const breakpoint = useBreakpoint()

  return (
    <M3Button appearance="filled">
      Save on {breakpoint.ge('medium') ? 'wide' : 'compact'} layout
    </M3Button>
  )
}