Star4
Documentation

Get up and running in minutes.

Install the package, register one provider, and import only the components you need. Every component is standalone, tree-shakeable, and typed from the ground up.

01

Install the package

Add Zyra NG UI to your Angular workspace.

npm install zyra-ng-ui
02

Register the provider

Enable the token-driven theme service once during app bootstrap.

// app.config.ts
import { provideZyra } from 'zyra-ng-ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideZyra({ theme: 'light' }),
  ],
};
03

Import and use

Drop any component directly into your standalone imports array.

import { ZyraButton, ZyraCard } from 'zyra-ng-ui';

@Component({
  standalone: true,
  imports: [ZyraButton, ZyraCard],
  template: `
    <zyra-card padding="lg">
      <zyra-button variant="primary">Get started</zyra-button>
    </zyra-card>
  `,
})
export class MyComponent {}

/ Components

All 16 components

Every component is a standalone import — add only what your feature needs. Click any name to open its interactive playground.

ComponentSelectorImport nameCategory
Button zyra-buttonZyraButtonActions
Chip zyra-chipZyraChipActions
Badge zyra-badgeZyraBadgeStatus
Avatar zyra-avatarZyraAvatarIdentity
Card zyra-cardZyraCardLayout
Accordion zyra-accordionZyraAccordionLayout
Divider zyra-dividerZyraDividerLayout
Input zyra-inputZyraInputForms
Form Field zyra-form-fieldZyraFormFieldForms
Toggle zyra-toggleZyraToggleForms
Spinner zyra-spinnerZyraSpinnerFeedback
Progress zyra-progressZyraProgressFeedback
Alert zyra-alertZyraAlertFeedback
Toast zyra-toast-containerZyraToastContainerFeedback
Tooltip zyra-tooltipZyraTooltipOverlays
Modal zyra-modalZyraModalOverlays

/ Theming

Customize the token layer

Zyra UI uses CSS custom properties as its design token system. Override any --zyr-* variable in your global stylesheet to instantly restyle every component.

Override tokens in CSS

/* global styles.css — override any token */
:root {
  --zyr-accent:        #7c3aed;
  --zyr-accent-muted:  #ede9fe;
  --zyr-radius-md:     6px;
  --zyr-font-body:     'Inter', sans-serif;
}

Switch themes at runtime

import { inject } from '@angular/core';
import { ZyraThemeService } from 'zyra-ng-ui';

const theme = inject(ZyraThemeService);

theme.setTheme('dark');   // force dark
theme.setTheme('light');  // force light
theme.toggle();           // switch between both
Color
--zyr-accent--zyr-bg--zyr-bg-2--zyr-bg-3--zyr-text--zyr-text-muted--zyr-border
Semantic
--zyr-success--zyr-warning--zyr-danger--zyr-info
Typography
--zyr-font-body--zyr-font-display--zyr-font-mono
Shape & Motion
--zyr-radius-sm--zyr-radius-md--zyr-radius-lg--zyr-transition-base--zyr-transition-fast

/ 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 --zyr-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.

Ready to build?

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