Get Started on AngularCSS

Introduction

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS provides HTML-first styles and focused interface components for AngularTS. Most interface elements are semantic HTML styled directly by CSS. TypeScript components are reserved for interactions that native HTML, CSS, and AngularTS do not already provide.

AngularCSS is a customization system, not a design system. It provides a stable functional baseline and presentation controls; the application owns its brand, visual language, and product-specific design.

<button variant="outline">Save changes</button>

No directive runs for this button. The browser owns activation and disabled state, AngularTS owns application commands, and CSS targets the native element and authored variant directly.

Install AngularCSS

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS is distributed as an npm package. Its behavioral components require AngularTS. Install both packages locally:

npm install @angular-wave/angular.ts @angular-wave/angular.css

No CDN is required. The package includes ESM, UMD, CSS, and TypeScript declaration outputs.

Stylesheet-only setup

Native elements, patterns, foundations, and recipes need only the compiled AngularCSS stylesheet:

@import "@angular-wave/angular.css/dist/angular.css";

<button variant="outline">Save</button>

These entries register no AngularCSS directive. Add AngularTS for application bindings, and load AngularCSS JavaScript with the angular.css dependency when using behavioral components such as tabs or comboboxes.

Build Your First Component

Mon, 01 Jan 0001 00:00:00 +0000

This page builds an accordion with native details and summary. The browser owns disclosure; AngularTS owns the application value inside the panel.

Add the HTML

<section ng-app="app">
 <section aria-label="Profile sections">
 <details name="profile-sections" open>
 <summary>Profile</summary>
 <div>
 <label for="display-name">Display name</label>
 <input id="display-name" ng-model="profile.name" />
 <output>Preview: {{ profile.name || "Unnamed" }}</output>
 </div>
 </details>
 </section>
</section>

Each direct child is a native disclosure item. The browser creates the trigger relationship and owns open state, focus, and keyboard activation.

Create the application module

import { angular } from "@angular-wave/angular.ts";
import "@angular-wave/angular.css";
import "@angular-wave/angular.css/dist/angular.css";

angular.createModule("app", ["angular.css"]);

No controller is required for this example. ng-model creates the profile name binding in the application scope, and interpolation updates the preview. AngularCSS does not parse or store that value.

Customization

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS is a customization system, not a design system. It supplies a consistent functional baseline and stable presentation controls. Your application still decides its brand, visual language, content hierarchy, and product-specific composition.

Every browser-facing customization control is a CSS custom property. Consumers do not need a token compiler, Tailwind, Sass, JavaScript, or an AngularCSS build step to change the defaults.

Load order

Load AngularCSS before application styles. The bundle declares this low-to-high layer order: base, angularcss.tokens, angularcss.components, components, and utilities.

Compatibility and upgrades

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS declares @angular-wave/angular.ts with the npm latest tag and tests the registry’s current release in CI. A daily compatibility run catches a new AngularTS release even when AngularCSS source has not changed. The package lock still records the exact version used for a reproducible AngularCSS build.

Supported environments

Current Chromium, Firefox, and WebKit engines are required browser projects.
Node.js 24 or newer is required for development, documentation, and package builds.
The distributed CSS and browser JavaScript are prebuilt. Consumers do not need the AngularCSS build toolchain.
Behavioral components require AngularTS. Styling-only foundations, elements, patterns, and recipes can use the compiled stylesheet alone.

AngularCSS uses current platform features including native dialog, the Popover API, CSS custom properties, cascade layers, logical properties, :has(), and @scope. Test the final application against its own supported browser policy, content, localization, zoom, and assistive technology.