I built an Angular component library on signals — the decisions, the numbers, and the bugs behind it

Description and use

A lightweight, accessible Angular component library built on signals, zoneless, with CI‑enforced WCAG 2.1 AA and CSS‑custom‑property theming.

Problem

Angular developers need a lightweight, accessibility‑centric component library that leverages the latest Angular primitives without the overhead of zone.js and NgModules.

Outcome

The library delivers a small, performant, and accessible component set that runs without zone.js, supports Angular 20‑22, and enforces WCAG 2.1 AA via CI.

Workflow

• 1. Design components using Angular signals (input, output, model, computed).
• 2. Implement components as standalone, OnPush, without NgModules or zone.js.
• 3. Enforce accessibility via CI (axe‑core) and WCAG 2.1 AA checks.
• 4. Provide theming through CSS custom properties and 9 prebuilt themes.
• 5. Publish the library to npm and test on Angular 20‑22 by building fresh apps.
• 6. Document components with live demos and enforce CI checks for axe violations.

Evidence

Signals-first APIs, zero zone.js · a full component catalog, from buttons to a virtual-scroll table and a command palette · themed entirely through CSS custom properties (9 prebuilt themes, one variable re-skins everything) · WCAG 2.1 AA enforced by CI — a single axe-core violation fails the PR · ~102 kB gzipped for the whole tree-shaken library, ~4 kB for a button · runs on Angular 20, 21 and 22

Source

Lesson 1: in a zoneless app, microtasks don't wait for your template

Source