Mat Expressive is built on top of Angular Material, with GSAP-powered spring motion where it counts. Every animation respects prefers-reduced-motion, and every shape, size, and speed follows Material 3 Expressive presets.
Everything You Need
Expressive Spring Animations
GSAP-powered spring physics bring the loading indicator to life with fluid, natural motion.
Zero Config
Drop-in directive on any Angular Material button. No new component API to learn.
Material 3 Tokens
Built on Angular Material 3 design tokens — themes, colors, and typography all just work.
Up in Minutes
Install, import, and add the directive. That's it.
Bash
ng add @ngm-dev/mat-exp
styles.scss
@use '@ngm-dev/mat-exp' as mat-exp;
html {
@include mat-exp.mat-exp-button-styles(
(
sizes: ('s'),
)
);
}
app.ts
import { MatExpButton } from '@ngm-dev/mat-exp';
import { MatButton } from '@angular/material/button';
@Component({
imports: [MatButton, MatExpButton],
template: `<button matButton matExpButton>Click me</button>`,
})
export class AppComponent {}