Installation

Install Neural UI 2

Run the command from your Angular 22 application directory. The ^2 range deliberately selects Neural UI 2.x, including when a newer major exists. Neural Icons is not required.

npm install @neural-ui/core@^2

Align required peers

If your application is missing CDK or the schematics peers, add them using the versions aligned with your Angular 22 toolchain. This is a concrete compatible combination, not a request to downgrade an existing compatible patch. Keep TypeScript and RxJS in the ranges listed under Requirements.

npm install @angular/cdk@22.2.2
npm install --save-dev @angular-devkit/schematics@22.2.2 @schematics/angular@22.2.2

Load the public styles

Add this line once to src/styles.scss, the global stylesheet included by Angular. If your project uses styles.css, create a SCSS file and reference it in angular.json → projects → your project → architect → build → options → styles.

The import loads shared Core styles and tokens. You do not need a theme preset or global Neural provider to render a basic component.

@use '@neural-ui/core/styles' as *;

Render your first component

In a newly generated application, replace src/app/app.ts with this root component. It retains the app-root selector used by src/index.html. In an existing application, add NeuButtonComponent to the imports of the component that renders the button instead.

Button decorates a native button; use button[neu-button], not a custom neu-button element. The example handles a real event and displays a count.

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/core/button';

@Component({
  selector: 'app-root',
  imports: [NeuButtonComponent],
  template: `
    <button
      neu-button
      type="button"
      (neuClick)="increment()"
    >
      Run interaction
    </button>
    <output aria-live="polite">Interactions: {{ clicks() }}</output>
  `,
})
export class App {
  readonly clicks = signal(0);
  increment(): void {
    this.clicks.update((count) => count + 1);
  }
}

Start and check the result

Keep the generated src/main.ts bootstrap shown below. Start Angular, open the URL it prints, then click Run interaction. You should see a styled button and a count that increases.

If the selector is unknown, check imports. If shared styles are missing, check the global SCSS entrypoint. A click must update the displayed signal without any extra Neural provider.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig).catch((error) => console.error(error));

Development command

Run this from the same application directory. The server address belongs to your Angular application, not to the library.

npm start

Optional global configuration

Use provideNeuralUI only when you need a supported global option: locale, timeZone, now or theme.preset. It does not enable hydration, choose dark mode, install icons or translate your application.

Optional CLI setup and generators

Prefer Angular CLI automation? Use the Schematics guide for ng add and the generators included in Core. If you already followed the manual installation above, do not register Core styles again: use the existing-package command with --skipStyles. A generator does not replace the component imports, application handlers or routes explained here.

Resolve common setup problems

Check the owning contract before adding another provider or forcing a refresh. These problems normally come from the integration boundary: imports, global styles, Angular versions or application-owned state. Continue with Signal Forms and State ownership for complete examples.

Optional Neural Icons

Install these separate packages only if you want Neural Icons in your application. Core already supplies its structural affordances. You can project a custom SVG without installing an icon library.

npm install @neural-icons/angular @neural-icons/core