Signals-first UI components for Angular.

Documentation · Getting started · Playground · Changelog

ngwr's form controls implement FormValueControl and FormCheckboxControl from Signal Forms directly. [formField] binds to each component's own value or checked model, and the library contains no ControlValueAccessor.

import { Component, signal } from '@angular/core';
import { FormField, email, form, required } from '@angular/forms/signals';
import { WrCheckbox } from 'ngwr/checkbox';
import { WrFormField } from 'ngwr/form';
import { WrInput } from 'ngwr/input';

@Component({
  selector: 'signup-card',
  imports: [FormField, WrCheckbox, WrFormField, WrInput],
  template: `
    <wr-form-field label="Work email" required>
      <input wrInput type="email" [formField]="signup.email" />
    </wr-form-field>

    <wr-checkbox [formField]="signup.agree">I agree to the terms</wr-checkbox>
  `,
})
export class SignupCard {
  private readonly model = signal({ email: '', agree: false });

  readonly signup = form(this.model, path => {
    required(path.email, { message: 'Enter your work email.' });
    email(path.email, { message: 'That is not an email address.' });
  });
}

<wr-form-field> shows each rule's message, so there is no error markup to write. ngwr ships no validation copy of its own: for a rule without a message, the field reads validation.<key> from your i18n catalog. Template-driven and reactive forms bind too, with limits the forms guide lists.

Features

• Standalone, signal-based components that work zoneless and render on the server.
• One import path per component (ngwr/button, ngwr/select). No runtime dependencies.
• Theming through --wr-* CSS custom properties, with light and dark modes that follow color-scheme.
• Keyboard and screen reader support based on the WAI-ARIA patterns.
• Translatable built-in labels and right-to-left layouts.
• Angular CDK test harnesses for the form controls and overlays.

Browse the components, charts and bits (animations and visual effects) with live demos. Directives, pipes, services and validators are in the reference.

Installation

ng add ngwr

The schematic asks a few questions, adds @use 'ngwr/theme'; to your global Sass stylesheet and prints the providers to add to your app.

Or install the packages yourself:

pnpm add ngwr @angular/cdk
# or
npm install ngwr @angular/cdk
# or
yarn add ngwr @angular/cdk

The optional packages are an icon set, shown in the installation guide, and ProseMirror for the editor.

Styles

One @use per thing you render, with the token layer on the first line. There is no umbrella stylesheet: each component brings the theme with it and Sass emits it once, but only a module's first load can take with (), which is where $base-colors goes.

// styles.scss
@use 'ngwr/theme';
@use 'ngwr/form';
@use 'ngwr/input';
@use 'ngwr/checkbox';

Utilities are opt-in. Write them below @use 'ngwr/theme', since some of them load the token layer too:

@use 'ngwr/reset'; // box-sizing, body margin, sane defaults
@use 'ngwr/grid'; // .grid, .container, .col-*
@use 'ngwr/animations'; // .wr-animate-* classes
@use 'ngwr/typography-utilities'; // .wr-text-*, .wr-font-* classes
@use 'ngwr/breakpoints' as bp; // Sass mixins only, no CSS output

Configuration

Nothing has to be configured. When you want app-wide settings, they go through one provideWr() call, with a feature for each thing you set, imported from its own entry point:

import { provideWr } from 'ngwr';
import { withDensity } from 'ngwr/density';
import { withTheme } from 'ngwr/theme';

providers: [
  provideWr(
    withDensity({ defaultDensity: 'sm' }),
    withTheme({ defaultMode: 'dark' }),
  ),
],

withDensity() and the [wrDensity] directive also need @use 'ngwr/density'; in your styles: no component loads the density scale. Icons and translations have calls of their own. The configuration guide lists every feature.

Upgrading

ng update ngwr

This installs the latest version and runs its migrations. The migration guide describes the changes in each major. The Angular badge shows the Angular versions ngwr supports, and SECURITY.md lists the majors that still get fixes.

AI agents

ngwr ships ngwr-mcp, an MCP server that lets coding agents search the catalog and read component APIs. Add it to your client:

{
  "mcpServers": {
    "ngwr": { "command": "npx", "args": ["-y", "-p", "ngwr", "ngwr-mcp"] }
  }
}

The MCP guide covers each client. Agents without MCP can use the agent skill, llms.txt, or any docs page as markdown by adding .md to its URL.

Contributing

Bug reports go to issues and questions to Discussions. Read CONTRIBUTING.md before opening a pull request, and report security issues privately as SECURITY.md describes.

License

MIT © Roman Khegay