I built an Angular component library in 2026 — here's what I learned

Durga jonnada — Sat, 09 May 2026 10:44:40 +0000

Building a UI component library sounds straightforward until you're deep in ARIA spec, CSS variable scoping, and Angular's change detection edge cases. Here's what I learned building Zyra UI in 2026.

Signals-first is the right call

Angular's new signal-based input() / output() APIs are dramatically cleaner than decorator-based @Input. Every Zyra UI component uses them natively. The DX difference when consuming the library is immediately obvious — no more @Input() variant: string = 'primary' boilerplate.

Design tokens or bust

Every color, radius, spacing, and shadow in Zyra UI is a CSS custom property. This makes theming trivial — dark mode, custom brands, high-contrast modes all work by swapping a token file, not rewriting components.

/* One file controls everything */
--zyr-accent: #00EAFF;
--zyr-radius-md: 10px;
--zyr-font-display: 'Outfit', sans-serif;

SSR is a requirement, not a nice-to-have

Google indexes Angular apps via SSR. Any component that touches the DOM directly without an isPlatformBrowser guard will break server rendering. I caught several of these during Lighthouse audits — easy to miss, painful to debug.

Accessibility audits surface surprising issues

Lighthouse flagged things I never would have caught manually:

aria-label on a plain <div> — needs role="region" to be valid
Heading hierarchy skipping <h1> to <h3> — must go <h1> to <h2>
Missing <main> landmark — screen readers cannot navigate without it

These are easy to miss visually but critical for screen reader users.

The result — Zyra UI

After all of this, Zyra UI is free and open source:

Angular 21 + Signals-first
Design token-driven theming
Dark-mode first, SSR-ready
WCAG 2.1 AA accessible

zyraui.dev | npm install zyra-ng-ui