# ZyraUI > ZyraUI is a premium, modern Angular UI component library for building clean, animated, high-performance interfaces. It targets Angular 21 with signals, zoneless change detection, standalone components, and SSR-safe, tree-shakeable components. Install with `npm install zyra-ng-ui`. The ZyraUI blog covers modern Angular, AI-assisted frontend development, UI animation, performance, and SEO. ## Components ZyraUI ships 23 standalone, tree-shakeable Angular components: - [Button](https://www.zyraui.dev/components/button): `` — 5 variants (primary, secondary, outline, ghost, danger), 3 sizes, loading state, icon slots - [Badge](https://www.zyraui.dev/components/badge): `` — status labels with dot indicator, 5 semantic variants - [Card](https://www.zyraui.dev/components/card): `` — header/footer slots, clickable mode, 4 visual variants - [Avatar](https://www.zyraui.dev/components/avatar): `` — image with initials fallback, presence dot, 5 color variants - [Input](https://www.zyraui.dev/components/input): `` — full CVA, password toggle, prefix icon, clear button - [Form Field](https://www.zyraui.dev/components/form-field): `` — wraps Input/Textarea with label, hint, auto error messages - [Spinner](https://www.zyraui.dev/components/spinner): `` — 4 color variants, 4 sizes, role="status" - [Toast](https://www.zyraui.dev/components/toast): `` + `ZyraToastService` — success/info/warning/error, auto-dismiss - [Tooltip](https://www.zyraui.dev/components/tooltip): `` — 4 positions, shown on hover and focus - [Modal](https://www.zyraui.dev/components/modal): `` — focus trap, ESC to close, 4 sizes, two-way [(open)] binding - [Alert](https://www.zyraui.dev/components/alert): `` — inline status messages, dismissible, role="alert" - [Chip](https://www.zyraui.dev/components/chip): `` — dismissible and selectable modes, 6 variants - [Switch](https://www.zyraui.dev/components/switch): `` — role="switch", 3 sizes, two-way [(checked)] - [Toggle](https://www.zyraui.dev/components/toggle): `` — button-press style, aria-pressed, two-way [(pressed)] - [Progress](https://www.zyraui.dev/components/progress): `` — linear bar, indeterminate mode, 5 semantic variants - [Divider](https://www.zyraui.dev/components/divider): `` — horizontal/vertical, solid/dashed/dotted, optional label - [Select](https://www.zyraui.dev/components/select): `` + `` — full CVA, keyboard navigation, 3 appearances - [Textarea](https://www.zyraui.dev/components/textarea): `` — auto-resize, full CVA, ZyraFormField integration - [Checkbox](https://www.zyraui.dev/components/checkbox): `` — indeterminate state, 3 sizes, two-way [(checked)] - [Radio Group](https://www.zyraui.dev/components/radio): `` + `` — arrow key navigation, vertical/horizontal - [Tabs](https://www.zyraui.dev/components/tabs): `` + `` — 4 variants, icons, badges, closeable tabs, vertical mode - [Skeleton](https://www.zyraui.dev/components/skeleton): `` — 20+ preset layouts (card, list, dashboard, chat, calendar…) - [Accordion](https://www.zyraui.dev/components/accordion): `` + `` — single/multi open, CSS grid animation ## Blog - [Angular @defer Blocks: Lazy Loading Done Right (2026)](https://www.zyraui.dev/blog/angular-defer-blocks-lazy-loading-2026): How Angular's @defer syntax enables true component-level lazy loading with triggers, placeholders, and loading states. - [Angular resource() and httpResource(): Signals-First Data Fetching](https://www.zyraui.dev/blog/angular-resource-api-httpresouce-signals-2026): How the new resource() and httpResource() APIs replace RxJS-heavy service patterns with reactive, signal-based data loading. - [Fix NG0908: In This Configuration Angular Requires Zone.js](https://www.zyraui.dev/blog/fix-ng0908-in-this-configuration-angular-requires-zonejs): What the NG0908 "Angular requires Zone.js" error means and the two ways to fix it — restore Zone.js in polyfills or configure zoneless correctly. - [Angular CLI MCP Server: Generate Components with AI](https://www.zyraui.dev/blog/angular-cli-mcp-server-generate-components-with-ai): How to set up the Angular CLI MCP server (`ng mcp`) and use it to generate accurate, modern Angular components with AI assistants. - [Better AI-Generated Angular Code: llms.txt & Codegen Scorer](https://www.zyraui.dev/blog/better-ai-generated-angular-code-llms-txt-web-codegen-scorer): Using llms.txt, the official Angular best-practices rules files, and the Web Codegen Scorer to make AI write modern Angular and measure its quality. - [Angular UI Performance in Zoneless, AI-Streaming Apps](https://www.zyraui.dev/blog/angular-ui-library-zoneless-ai-streaming-rerenders): Why your UI library and change detection strategy decide whether a streaming LLM chat UI feels smooth or janky in zoneless Angular 21. - [7 Modern Angular UI Animations You Can Build in 2026](https://www.zyraui.dev/blog/modern-angular-ui-animations-2026): Practical Angular animations using the View Transitions API, CSS, IntersectionObserver, and signals, built the performant, accessible way. - [Angular SSR & SEO in 2026: Core Web Vitals Done Right](https://www.zyraui.dev/blog/angular-ssr-seo-2026-core-web-vitals-component-library): A practical guide to Angular 21 SSR, hydration, meta tags, structured data, and keeping Core Web Vitals green with a component library. - [Angular v21 Zoneless Guide: Remove ZoneJS, Use Signals](https://www.zyraui.dev/blog/angular-v21-zoneless-guide-remove-zonejs-use-signals): What zoneless Angular means in v21, why ZoneJS is no longer the default, how signals fit in, and how to migrate safely. - [Angular 21 Signals Explained: Signals, Signal Forms](https://www.zyraui.dev/blog/angular-21-signals-explained-signals-signal-forms): An in-depth guide to Angular 21 signals, Signal Forms, zoneless change detection, and RxJS interoperability. - [Angular Folder Structure Best Practices (2026 Guide)](https://www.zyraui.dev/blog/angular-folder-structure-practices-2026-guide): A feature-based folder structure for scalable, maintainable Angular apps with standalone components. ## Resources - [Components gallery](https://www.zyraui.dev/components): Interactive playground for all 22 components. - [Documentation](https://www.zyraui.dev/docs): Install guide, provider setup, and token reference. - [Blog index](https://www.zyraui.dev/blog): All ZyraUI articles. - [Changelog](https://github.com/ramajonnada/zyra-ui/blob/main/CHANGELOG.md): Release history and what changed per version. - [Roadmap](https://github.com/ramajonnada/zyra-ui/blob/main/docs/PRODUCT_ROADMAP.md): Planned components and features. - [npm package](https://www.npmjs.com/package/zyra-ng-ui): `npm install zyra-ng-ui` - [GitHub](https://github.com/ramajonnada/zyra-ui): Source code and issue tracker. - [Sitemap](https://www.zyraui.dev/sitemap.xml): Full site URL index.