Installation

Add ngwr to an Angular app.

Install

ng add installs the peers and adds the theme to your global styles.

ng add ngwr

Or by hand:

pnpm add ngwr @angular/cdk

Styles

In your global stylesheet: the theme first, then one line per component you render.

@use 'ngwr/theme';
@use 'ngwr/button';
@use 'ngwr/select';
Optional sheetWhat it adds
@use 'ngwr/density';The density scale. Needed for withDensity() and [wrDensity]
@use 'ngwr/reset'; A modern CSS reset
@use 'ngwr/grid';A 12-column grid and container
@use 'ngwr/typography-utilities';Text utility classes
@use 'ngwr/animations'; Keyframes and animation classes
@use 'ngwr/breakpoints' as bp;Breakpoint mixins for your own SCSS

Write them below the theme line: reset, animations and typography-utilities load the token layer too.

Use a component

Import each component from its own entry point: ngwr/button, not ngwr.

import { Component } from '@angular/core';
import { WrButton } from 'ngwr/button';

@Component({
  selector: 'app-root',
  imports: [WrButton],
  template: `<wr-btn color="primary">Save</wr-btn>`,
})
export class App {}

Icons

Install an icon set and register the icons you use. All icon sets.

pnpm add lucide
import { Check } from 'lucide';
import { lucideIcons, provideWrIcons } from 'ngwr/icon';

@Component({
  providers: [provideWrIcons(lucideIcons({ check: Check }))],
  template: `<wr-btn icon="check">Save</wr-btn>`,
})
export class App {}

Configure

Optional. One provideWr() call, one feature per setting. withDensity() also needs @use 'ngwr/density'. Configuration.

import { provideWr } from 'ngwr';
import { withDensity } from 'ngwr/density';
import { withToast } from 'ngwr/toast';

export const appConfig: ApplicationConfig = {
  providers: [provideWr(withDensity(), withToast({ duration: 6000 }))],
};

Schematics

CommandWhat it does
ng add ngwrInstalls peers, adds the theme to styles, prints the providers to paste
ng add ngwr --styles=theme --density=lgThe same without prompts
ng g ngwr:use WrButton --path <file>Adds the import and puts it in the component imports
ng g ngwr:provider <name>Adds a provider to app.config.ts: density, toast, storage or theme inside provideWr(), icons, i18n or loading-bar-router as a call of its own
ng g ngwr:component-style <name>Adds @use 'ngwr/<name>' to global styles, below the theme line
ng g ngwr:icon-setWrites a tree-shaken icon barrel
ng g ngwr:pageScaffolds a form, table or dashboard page
ng update ngwrUpdates from any earlier major and runs its migrations

Compatibility

ngwrAngularCDKNode
15.x222222.22+, 24.15+, 26
14.x22+22+22.22+, 24.15+, 26
7.x to 13.x22+22+24.16+, 26
6.x17+17+24+
5.x17+17+20+

Browsers: Chrome 123, Firefox 120, Safari 17.5 and newer.

See also