A dark-mode-first Angular component library built with design tokens, signals, and zero-runtime theming.

Live Playground →

• Angular 21+ signals-first — every component uses input(), output(), signal(), computed()
• Design-token theming — swap the entire look with one CSS variable file
• Dark-mode first — designed in the dark, perfected in the light
• Standalone components — no NgModules, just import what you need
• Tree-shakeable — only ship what you use
• WCAG 2.1 AA accessible — keyboard nav, focus rings, ARIA labels built in

npm install zyra-ng-ui

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

In your styles.scss:

@import 'zyra-ng-ui/styles';

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

@Component({
  imports: [ZyraButton, ZyraBadge],
  template: `
    <zyra-button variant="primary" (clicked)="onClick()">
      Get Started
    </zyra-button>

    <zyra-badge variant="success" [dot]="true">Online</zyra-badge>
  `
})
export class AppComponent {
  onClick() {}
}

All colors, spacing, and radii are CSS variables. Override them in your global styles:

:root {
  --zyr-accent: #your-brand-color;
  --zyr-radius-md: 8px;
}

projects/
  zyra-ng-ui/     ← publishable Angular library (npm)
  zyra-ui/        ← marketing site + component playground

See CONTRIBUTING.md for setup instructions and branch workflow.

See CHANGELOG.md for version history.

MIT © Rama Jonnada