Installation

Install and configure Avesra for Angular.

Avesra is two packages: @avesra/angular for components and @avesra/styles for tokens and CSS. Tailwind CSS v4 is the styling engine — do not add Sass or Less for library styles.

Create project

Start the Angular CLI and create an application that uses CSS as the default stylesheet. Skip this step if you already have an Angular 19 app.

Terminal

ng new my-app --style=css

Add dependencies

Install the component library, the theme package, and the Tailwind v4 PostCSS pipeline.

npmpnpmyarnbun

npm install @avesra/angular @avesra/styles
npm install -D tailwindcss @tailwindcss/postcss postcss

Configure the Tailwind pipeline

Create a .postcssrc.json at the root of your project. Angular picks this file up automatically.

.postcssrc.json

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Configure styles

Add the following to src/styles.css. Tailwind first, then Avesra. Tokens and component CSS live in @avesra/styles — see the theming section.

styles.css

@import "tailwindcss";
@import "@avesra/styles";

Register the theme provider

Add provideAvesraTheme() to the providers of src/app/app.config.ts so light, dark, and design presets apply on <html>.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideAvesraTheme } from '@avesra/styles';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAvesraTheme({ mode: 'system', persist: true }),
  ],
};

That's it

Import a component from @avesra/angular and compose it in your template.

app.ts

import { Component } from '@angular/core';
import { AvButtonComponent } from '@avesra/angular';

@Component({
  selector: 'app-root',
  imports: [AvButtonComponent],
  template: `<button av-button>Get started</button>`,
})
export class App {}