NgNova UI

NgNova UI 1.0.2 is an open-source Angular 22 component library built with standalone components, focused package entry points, accessible interaction contracts, and Tailwind CSS theming.

• Documentation
• Component documentation
• Runnable quick start
• Getting started
• Contributing
• Release notes

• Angular-native: standalone Angular 22 components with typed, explicit APIs.
• Focused imports: use entry points such as @ngnova/ui/button, @ngnova/ui/input, and @ngnova/ui/toast without pulling unrelated components into the dependency graph.
• Accessible interactions: keyboard behavior, focus management, semantics, and ARIA contracts are treated as supported product behavior.
• Tailwind v4 theming: static utility classes, dark-mode support, and an optional versioned CSS token stylesheet without a runtime theme provider.
• Package-aligned documentation: live examples, snippets, API tables, accessibility notes, and testing guidance are checked against the public package surface.
• Testing support: Angular CDK component harnesses are available from @ngnova/ui/testing.

See the complete Angular compatibility policy and browser and assistive-technology support matrix.

Install NgNova UI:

npm install @ngnova/ui

If the consuming application does not already use Tailwind CSS v4, configure it:

ng add tailwindcss

In the application's global stylesheet, ensure Tailwind is imported once and add NgNova UI as an explicit source:

@import 'tailwindcss';
@import '@ngnova/ui/styles/theme.css';
@custom-variant dark (&:where(.dark, .dark *));
@source "../node_modules/@ngnova/ui";

• @source is required because Tailwind v4 ignores node_modules by default.
• @custom-variant is required when dark mode is controlled by a .dark class on the application shell or html element.
• If @import 'tailwindcss' already exists, do not add it again.

The @ngnova/ui/styles/theme.css import is optional but recommended. It provides the supported --ui-* foundation, semantic, and component tokens. Applications can omit it to use only the component utility styles. Brand and feedback overrides drive the mapped Tailwind color families; foundation and component tokens apply where their concepts are used, while neutral semantic tokens support consumer application composition. See the theme migration and customization guide.

Angular CDK is an optional peer dependency. Install the matching Angular 22 CDK when using @ngnova/ui/overlay or @ngnova/ui/table-virtual-scroll:

npm install @angular/cdk@^22.0.0

All other runtime component entry points remain CDK-free. Applications using the published test harnesses should install CDK as a development dependency instead:

npm install --save-dev @angular/cdk@^22.0.0

Import components from their focused entry points:

import { Component } from '@angular/core';
import { UiButtonComponent } from '@ngnova/ui/button';

@Component({
  standalone: true,
  imports: [UiButtonComponent],
  template: `<ui-button variant="primary">Save</ui-button>`,
})
export class SaveButtonExample {}

The root @ngnova/ui entry point intentionally exposes only the minimal package contract. Public components are exported from focused paths such as @ngnova/ui/button and @ngnova/ui/input so optional integrations do not enter unrelated dependency graphs.

NgNova's Input, Textarea, Checkbox, Switch, Radio Group, Select, Combobox, and Date Picker support Angular 22 Signal Forms through the [formField] directive. Reactive Forms and template-driven forms remain supported.

import { Component, signal } from '@angular/core';
import { form, FormField, required } from '@angular/forms/signals';
import { UiInputComponent } from '@ngnova/ui/input';

@Component({
  standalone: true,
  imports: [FormField, UiInputComponent],
  template: `<ui-input label="Email" [formField]="accountForm.email" />`,
})
export class AccountFormComponent {
  readonly account = signal({ email: '' });
  readonly accountForm = form(this.account, (path) => {
    required(path.email, { message: 'Email is required.' });
  });
}

See the Angular Forms guide for the supported controls and form-state behavior.

NgNova UI documents 40 public component surfaces:

Browse the component documentation for current APIs, live examples, accessibility guidance, and import statements. Headless table state utilities are also available from @ngnova/ui/table-state.

NgNova UI publishes Angular CDK harnesses from the dedicated testing entry point:

import { UiButtonHarness, UiInputHarness } from '@ngnova/ui/testing';

const button = await loader.getHarness(UiButtonHarness.with({ text: 'Save' }));
await button.click();

const email = await loader.getHarness(UiInputHarness.with({ label: 'Email' }));
await email.setValue('dev@example.com');

The testing entry point includes harnesses for interactive controls, forms, overlays, navigation, feedback, and data components. Treat harness methods as supported public API.

The maintainer toolchain uses the Node.js versions documented in Angular compatibility.

npm install
npm run build:lib
npm start

Open the documentation application at:

http://localhost:4200/#/

Open a component page directly at:

http://localhost:4200/#/components/button

The documentation application imports from the built @ngnova/ui package shape. Build the library before validating focused entry points or package output.

• projects/ui: Angular library source and focused package entry points.
• projects/ui/README.md: README included in the published npm package.
• src/app: documentation application.
• docs: compatibility, design, release, support, and engineering contracts.
• scripts: release checks, API validation, package audits, and consumer smoke tests.

npm run format:check       # Verify formatting
npm run lint               # Lint the documentation app and library
npm run test:lib           # Run library unit tests
npm run test:docs          # Run documentation application tests
npm run build:lib          # Build the ng-packagr package to dist/ui
npm run build:docs         # Build the library and production documentation app
npm run release:check      # Run the complete release-readiness pipeline

The release pipeline also checks documentation/API consistency, accessibility focus contracts, theme contracts, Angular compatibility, package exports, bundle budgets, SSR, hydration, zoneless consumers, and the npm tarball.

Contributions are welcome. Start with the public contribution guide or the repository's CONTRIBUTING.md.

• Code of conduct
• Security policy
• Support policy
• Versioning and deprecation
• Angular 22 library standards
• Product roadmap

Stable releases are published from GitHub Actions using npm trusted publishing. The workflow runs the full release gate and publishes only the ng-packagr output from dist/ui:

npm run release:check

Create a stable GitHub Release with a tag matching the package version, such as v1.0.3. See the trusted npm publishing guide for environment configuration, and release operation.

NgNova UI is available under the MIT License.

Copyright (c) 2026 Chirag Patel.