No NgModule to register

Older libraries require importing a SomeModule into your app's module graph before a single component works. Zyra UI components are standalone — import the one you need directly into your component's imports array.

No RxJS just to use a component

Older libraries often expose state as Observables, forcing | async pipes or manual subscriptions for basic component usage. Zyra UI's inputs, outputs, and internal state are signal-based — no RxJS required to use a component.

No decorator boilerplate

No @Input()/@Output() decorator pairs to keep in sync. Every component uses input(), output(), and model() — typed, and consistent across all 60 components.

Step 01

Install the package

Add zyra-ng-ui and its peer dependencies to your Angular workspace. Requires Angular 21+ and @angular/forms.

npm install zyra-ng-ui

Step 02

Import global styles

Add one line to your global stylesheet. This loads all design tokens, theme variables, animations, and base resets.

@use 'zyra-ng-ui';

Step 03

Register the provider

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

import { provideZyra } from 'zyra-ng-ui';

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

Step 04

Import and use

Drop any component directly into your standalone imports array — tree-shake the rest.

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

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

Next: explore the components

Browse every component with live examples and copy-paste code.

Installation

Why this is faster than older Angular UI libraries