Star

Overview

Zyra UI is signals-first and standalone-only — no NgModules anywhere in the API, no RxJS required to use a component, every input/output/token fully typed. Styling runs on a single CSS custom-property token system. Everything below links to a dedicated guide — start with Installation if this is your first time here.

See what's new in the Changelog.

InstallationInstall the package, import global styles, and register the theme provider.ComponentsHow components are organized, conventions, and the full catalog by category.ThemingSwitch between five built-in themes and preview components live.Theme tokensThe full design token reference and what is safe to override.AccessibilityKeyboard support, focus management, ARIA roles, and contrast, verified per component.CompatibilityAngular version support, SSR, zoneless change detection, and browser support.RoadmapWhere Zyra UI is headed — Pro components, templates, and beyond.

/ FAQ

Common questions

Angular 17 or later. Zyra UI is built entirely with the new signals API — input(), model(), output(), and computed() — which requires Angular 17+. Angular 21 is recommended for the best experience.
Yes. All components are compatible with Angular Universal and the built-in SSR support introduced in Angular 17. The library avoids direct DOM access at render time, so hydration works without any special configuration.
None beyond Angular itself. Zyra UI ships zero runtime peer dependencies — no additional CSS frameworks, icon libraries, or animation packages required. Just install zyra-ng-ui and you're set.
All components are standalone by design, but you can still import them into an NgModule via the imports array of any module. The standalone architecture does not prevent module-based usage.
Override --zyra-color-accent in your global styles. Zyra UI derives every accent-tinted surface — muted backgrounds, borders, focus rings — from that single variable, so one change cascades through the entire system.
Yes. Call theme.setTheme('dark') via the injected ZyraThemeService and every component switches immediately. The theme service also exposes a toggle() method for a one-line light/dark toggle.
Open an issue on the GitHub repository. Include your Angular version, the component selector, and a minimal reproduction — a StackBlitz link is ideal.
You're likely missing the global stylesheet import. Add @use 'zyra-ng-ui'; to your root styles.scss (or styles.css). This one line loads all design tokens, theme variables, animations, and base resets.
This happens when your app is configured for zoneless change detection but zone.js is still listed in polyfills. Either remove zone.js from polyfills and add provideExperimentalZonelessChangeDetection() to your providers, or restore zone.js and remove the zoneless provider. See the full fix guide.
Zyra UI ships its own icon renderer — no extra peer dependency is needed. Make sure you have imported zyra-ng-ui styles in your styles.scss. Icons are SVG-based and should work out of the box.
Wrap your zyra-input or zyra-textarea in a zyra-form-field with a [label] and make sure the input is bound with ngModel or a reactive formControl. ZyraFormField reads the control's NgControl automatically and derives error messages from standard Angular validators (required, email, minlength, maxlength, min, max, pattern) — no extra error prop needed.

Ready to build?

Browse the interactive playground for every component and copy the code you need.