Mat Expressive

Mat Expressive is a library of components and styles for Angular Material, built on the latest Material Design 3 Expressive Design System.

It is not a replacement for Angular Material and not a fork of it. Instead, it's a collection of:

| Kind | What it does | | --- | --- | | Styles | Applied to existing Angular Material components to make them expressive and consistent with M3 Expressive. | | Directives | Same goal as styles, but used when styles need to reach the underlying HTML elements or add specific behavior. | | Components | New components for cases Angular Material doesn't cover. |

Getting started

ng add @ngm-dev/mat-exp

See the installation guide for setup instructions, or browse the full documentation for components, styling APIs, and playgrounds.

How does it work?

Mat Expressive styles components using Angular Material's overrides APIs and CSS variables. When a change isn't possible through those APIs, Mat Expressive applies styles directly to the underlying HTML elements instead (for example, Angular Material's .mdc-button class).

[!NOTE] Applying styles directly to underlying HTML elements means Mat Expressive could break if Angular Material changes those classes in a future release. We track Angular Material releases and update accordingly when that happens.

Don't want styles applied to underlying HTML elements? You can opt out — see Skip HTML element styles in the Styles API section. Note that some visual results (like icon sizing and shape morphing) won't be available without them.

Licensing

@ngm-dev/mat-exp is free and open source under the MIT license.

Questions? Raise an issue, start a discussion, or reach out on X.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!