I built an Angular component library in 2026 — here's what I learned
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;
Enter fullscreen mode Exit fullscreen mode
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-labelon a plain<div>— needsrole="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
What's your biggest pain point with Angular UI libraries? Drop it in the comments — I'm actively building v2 and want to solve real problems.