Installation

Requirements

The current package requires @angular/core, @angular/common and @angular/forms matching ^22.1.0 (Angular 22.1 or later within version 22). Use an existing Angular application with compatible dependencies.

New Angular project

Create an Angular 22 application, then install Avero UI inside it.

npx @angular/cli@22 new my-app --standalone --routing --style=scss
cd my-app
npm install @gszydlo/avero-ui
npx ng serve

Existing Angular project

Run this command in your application's root, next to package.json. Then import the components you want to use.

npm install @gszydlo/avero-ui

Use a component

Import components from @gszydlo/avero-ui and add them to the consuming component's imports. Use FormsModule for ngModel or ReactiveFormsModule for reactive forms.

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AvButton, AvInput } from '@gszydlo/avero-ui';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [FormsModule, AvInput, AvButton],
  template: `
    <label for="name">Name</label>
    <input avInput id="name" [(ngModel)]="name" />
    <button avButton (click)="name.set('')">Clear</button>
  `,
})
export class Example {
  readonly name = signal('');
}

Browse Input, Button and Dropdown for more examples and their APIs.

Customize styles

Component styles are included automatically. No separate CSS import, theme package or entry in angular.json is required. Override the documented CSS variables globally or on individual elements.

/* Add to your application's global stylesheet. */
:root {
  --av-input-focus: #0f766e;
  --av-input-radius: 8px;
  --av-input-border: #cbd5e1;
}

/* Override a single field. */
.custom-input {
  --av-input-focus: #7c3aed;
}