# Installation

> Add ngwr to an Angular app.

Source: https://ngwr.dev/docs/installation

## Install

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

```bash
ng add ngwr
```

Or by hand:

```bash
pnpm add ngwr @angular/cdk
```

```bash
npm install ngwr @angular/cdk
```

```bash
yarn add ngwr @angular/cdk
```

```bash
bun add ngwr @angular/cdk
```

## Styles

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

```scss
@use 'ngwr/theme';
@use 'ngwr/button';
@use 'ngwr/select';
```

| Optional sheet | What it adds |
| --- | --- |
| `@use 'ngwr/density';` | [The density scale. Needed for withDensity() and [wrDensity]](https://ngwr.dev/guides/tokens/density) |
| `@use 'ngwr/reset';` | A modern CSS reset |
| `@use 'ngwr/grid';` | [A 12-column grid and container](https://ngwr.dev/guides/grid) |
| `@use 'ngwr/typography-utilities';` | [Text utility classes](https://ngwr.dev/guides/typography/styles) |
| `@use 'ngwr/animations';` | Keyframes and animation classes |
| `@use 'ngwr/breakpoints' as bp;` | [Breakpoint mixins for your own SCSS](https://ngwr.dev/guides/grid) |

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`.

```angular-ts
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](https://ngwr.dev/icons).

```bash
pnpm add lucide
```

```bash
npm install lucide
```

```bash
yarn add lucide
```

```bash
bun add lucide
```

```angular-ts
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](https://ngwr.dev/docs/configuration).

```angular-ts
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

| Command | What it does |
| --- | --- |
| `ng add ngwr` | Installs peers, adds the theme to styles, prints the providers to paste |
| `ng add ngwr --styles=theme --density=lg` | The 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-set` | Writes a tree-shaken icon barrel |
| `ng g ngwr:page` | Scaffolds a form, table or dashboard page |
| `ng update ngwr` | Updates from any earlier major and runs its migrations |

## Compatibility

| ngwr | Angular | CDK | Node |
| --- | --- | --- | --- |
| 15.x | 22 | 22 | 22.22+, 24.15+, 26 |
| 14.x | 22+ | 22+ | 22.22+, 24.15+, 26 |
| 7.x to 13.x | 22+ | 22+ | 24.16+, 26 |
| 6.x | 17+ | 17+ | 24+ |
| 5.x | 17+ | 17+ | 20+ |

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

## See also

- [Configuration](https://ngwr.dev/docs/configuration) — Set app-wide options at bootstrap.
- [Theming](https://ngwr.dev/guides/theming) — Load the theme, switch light and dark, and rebrand the palette.
- [Icons](https://ngwr.dev/icons/overview) — ngwr ships a registry-based icon system.
- [Content Security Policy](https://ngwr.dev/guides/csp) — Run ngwr under a strict Content Security Policy.
- [Migration guide](https://ngwr.dev/docs/migration) — Upgrade ngwr from any earlier major.