🌾

ng-oat

The Angular integration layer for Oat UI

Semantic HTML components, Signal Forms fields, directives, and design-token theming — built for Angular's latest APIs with zero runtime dependencies.

Zoneless

Signal-based

SSR-safe

Standalone

38+

Components

Directives

Form Fields

Design Tokens

Three pillars

Semantic HTML

Typography, forms, tables, buttons, badges, alerts, and progress — pure Oat CSS with zero Angular wrappers needed.

Forms

Tables

Typography

Angular Components

Full component wrappers with inputs, outputs, signals, ARIA, and keyboard navigation built in.

Dropdown

Dialog

Tabs

Toast

Signal Forms

Custom field components implementing FormValueControl and FormCheckboxControl for Angular Signal Forms.

Input

Select

Checkbox

Radio

Component library

Every component in the library — click to jump to its demo.

Getting started

1. Install

npm install @letsprogram/ng-oat

2. Configure

import { provideNgOat } from '@letsprogram/ng-oat';

export const appConfig = {
  providers: [provideNgOat()]
};

3. Use components

<ng-oat-button variant="danger">
  Delete
</ng-oat-button>

<ng-oat-badge variant="success">
  Active
</ng-oat-badge>

4. Signal Forms

<ng-oat-input
  label="Email"
  type="email"
  [formField]="myForm.email" />

<ng-oat-form-error
  [control]="myForm.email" />

Architecture

Zero dependencies

Only peer deps on Angular. No runtime overhead beyond Oat CSS.

Signal-first

All state uses Angular signals. Works with zoneless change detection out of the box.

SSR compatible

Every component guards browser APIs behind isPlatformBrowser and afterNextRender.

Accessible

ARIA attributes, keyboard navigation, and focus management baked into every interactive component.

Themeable

Runtime theme switching via provideNgOatTheme with 87 CSS custom properties.

Tested

62+ unit tests across all directives and services, powered by Vitest.