Accessible
WCAG 2.0 AA compliant. Keyboard nav, focus rings, and screen-reader labels baked in.
/ Components
Built from primitives polished like products.
Every component is accessible, themeable and obsessively crafted. Hover anything below— yes, it reacts.
Button
5 variants / 4 sizes
Switch
Neon mode
Brighter accents, louder glow
• Active
BadgeLive v3.5.0 TypeScript Passed
your@email.dev
Progress
Build93%
Coverage94%
Bundle32.4kb
Toast
Deployed to production
zyra-ui.preview.vercel.app
/ Developer Experience
Zero config. TypeScript native.
Import what you need. Tree-shake the rest. ZyraUI is built on Angular standalone components, styled with CSS variables, and ships with fully typed, zero-runtime primitives.
Standalone-only — no NgModules to wire up, anywhere in the API
Signals-first — input(), output(), and model() throughout, no RxJS required to use a component
CSS variables for effortless theming
A11y-first – tested with ARIA + VoiceOver
import { Component, signal } from '@angular/core';
import { ZyraButton, ZyraCard, ZyraInput } from 'zyra-ng-ui';
@Component({
selector: 'app-signup-card',
imports: [ZyraCard, ZyraInput, ZyraButton],
template: `
<zyra-card>
<h2>Join the waitlist</h2>
<zyra-input placeholder="you@company.dev"
(valueChange)="email.set($event)" />
<zyra-button variant="ghost">Reserve your spot</zyra-button>
</zyra-card>
`,
})
export class SignupCard {
email = signal('');
}
// No NgModule. No @Input()/@Output(). No RxJS required.
/ Why ZyraUI
Everything you'd build. None of the boilerplate.
Obsessively crafted primitives so you can focus on what actually makes your product memorable.
Themeable
CSS variables + token-defined colors. Re-skin the entire library with a single token file.
Standalone-only
Every component is a standalone Angular component. No NgModules, anywhere in the public API.
Tree-shakeable
Tiny per-component footprint. Average button ships under 2kb gzip.
Dark-mode first
Designed in the dark, perfected in the light. Auto-switch based on OS preference.
Smooth animations
Hand-crafted easings for hover, press, enter, and scroll. Never janky.
/ Blocks
Ready-made patterns. Zero rework.
Production-ready UI blocks assembled from Zyra primitives. Copy, paste, ship — no custom styling needed.
Auth formAuth
Sign in
your@email.dev
••••••••••
Continue
Stats rowDashboard
12.4k
Monthly users
99.9%
Uptime SLA
4.8 / 5
Satisfaction
NotificationsFeedback
Deploy complete
zyra-ui.vercel.app is live
Update available
v3.5.0 is ready
Storage at 80%
Consider upgrading
/ Theming
Your brand. Zyra's engine.
Every color, radius, and font is a CSS variable. Swap one token file and the whole library re-skins. No build step, no class overrides.
Accent--zyra-color-accent
Blue--zyra-color-accent-secondary
Purple--zyra-color-accent-tertiary
Success--zyra-color-success
Warning--zyra-color-warning
:root {
/* Brand — override these to re-skin everything */
--zyra-color-primary: #00eaff; /* primary CTA, focus rings, glows */
--zyra-color-primary-hover: #4f8cff; /* hover state */
--zyra-color-primary-subtle: #b57cff; /* subtle backgrounds */
/* Shape & type */
--zyra-radius-lg: 12px;
--zyra-font-body: 'Inter', sans-serif;
}
/ v4 waitlist
Be first to try ZyraUI v4.
More components, richer motion, and a design token system built for teams that ship. Join the waitlist and get early access before the public launch.
• No spam. Unsubscribe any time.
/ Get started
Where do I go next?
Read the docs
Installation guide, theming reference, and full API docs for every component.
Try the playground
Live interactive demos for every component. See it, tweak it, copy the code.
