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.

// styles.scss (or styles.css)
@use 'zyra-ng-ui';

Step 03

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' }),
  ],
};

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({
  standalone: true,
  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.