Angular components shaped for public websites and real apps.
Zyra UI is a design-token driven Angular library. 16 components, zero compromises — built with the belief that the same system should power your landing page and your product.
Token-first design
Colors, spacing, radius, elevation, and motion all live in the Zyra token layer — override one variable, update the entire system.
Signals-first DX
Built for Angular 17+ with model(), input(), and output() — reactive by default, no RxJS required for component inputs.
Angular-native
Standalone components, typed APIs, OnPush change detection, and modern Angular patterns guide every public example.
Accessibility built in
ARIA roles, keyboard navigation, focus management, and visible focus rings — every component ships accessible out of the box.
Public-site ready
SSR-compatible, SEO-considered, and fast. Zyra UI powers the docs, blog, and landing pages it documents.
Why it exists
Built from frustration. Refined by real usage.
Zyra UI started as a personal project during the Angular signals era — a way to stop copy-pasting the same button and form field into every new project. Over time it grew into a full design system that works the same way whether you're building a marketing page, a dashboard, or a docs site.
The library intentionally uses itself: every component shown on this website is the real published package, same version, same tokens. Demos stay honest, regressions surface immediately, and visitors get an accurate preview of what they'll ship.