A from-scratch M3 component kit for Angular

Get started

1. 1

   Install

   Add the package to an Angular 21+ app.

   bash Copy

   npm install @ngguide/ui

2. 2

   Set the theme

   One brand color generates the whole M3 token set — every --md-sys-* role, light and dark. mode: 'auto' follows the OS. This is all the theming the components need.

   ts Copy

   // app.config.ts
   import { provideM3Theme } from '@ngguide/ui/theme';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       // One brand seed -> the full M3 dynamic-color token set.
       provideM3Theme({
         sourceColor: '#6750A4',   // your brand color
         variant: 'tonal-spot',
         contrast: 'standard',
         mode: 'auto',             // 'light' | 'dark' | 'auto'
       }),
     ],
   };

3. 3

   Use a component

   Each component is its own entry point — import only what you use.

   ts Copy

   import { ButtonComponent } from '@ngguide/ui/button';
   
   @Component({
     selector: 'app-root',
     imports: [ButtonComponent],
     template: `<button gui-button variant="filled">Get started</button>`,
   })
   export class AppComponent {}

Icons use the Material Symbols font — load it once in your global styles. Need to re-theme at runtime (brand switch, dark toggle)? Inject M3ThemeService and call setTheme().