GET STARTED

Installation

Add NeuralNg to an Angular application, connect the design system and render your first tree-shakable component.

Angular 22+Standalone APIsSSR safe

BEFORE YOU START

Prerequisites

NeuralNg targets Angular 22 or newer and uses standalone components, Signals and strict TypeScript contracts. Your application does not need an NgModule.

Angular 22+

Modern standalone application.

TypeScript strict

Recommended for complete inference.

Browser or SSR

Both rendering modes are supported.

Install packages

Core contains the Angular components. Icons are framework-independent and optional, but recommended for the built-in icon examples.

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

Other package managers

pnpm add @neural-ng/core @neural-ng/icons

yarn add @neural-ng/core @neural-ng/icons

Add the visual layer

Import the Neutral reference theme once in your global stylesheet. The icon stylesheet is needed only when using nt nt-* classes.

@import '@neural-ng/core/themes/neutral.css';
@import '@neural-ng/icons/icons.css';

Theme CSS is side-effectful by design. Component code still comes from granular entry points such as @neural-ng/core/button, so unused components stay out of the bundle.

Configure Angular

Register direction and density with provideNeuralNg(). provideNeuralAppearance() adds persisted primary and surface palettes, light/dark/system mode and logical direction.

import { ApplicationConfig } from '@angular/core';
import { provideNeuralNg } from '@neural-ng/core';
import { provideNeuralAppearance } from '@neural-ng/core/appearance';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNeuralNg({
      direction: 'auto',
      density: 'comfortable',
    }),
    provideNeuralAppearance({
      primary: 'blue',
      surface: 'slate',
      mode: 'system',
      direction: 'auto',
      storageKey: 'product-appearance',
    }),
  ],
};

Use your first component

Import from the component entry point. NeuralNg components are standalone, so the import belongs directly in the consuming component.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NeuralButton } from '@neural-ng/core/button';

@Component({
  selector: 'app-save-action',
  imports: [NeuralButton],
  template: `
    <neural-button
      label="Save changes"
      icon="nt nt-check"
      (clicked)="save()"
    />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SaveAction {
  save(): void {
    // Persist your changes.
  }
}

Explore Button Explore Input

Optional Tailwind CSS bridge

NeuralNg does not depend on Tailwind. Tailwind CSS v4 applications can opt into the token bridge to use classes such as bg-primary-500, text-surface-950 and the same namespaced dark-mode selector.

@import 'tailwindcss';
@import '@neural-ng/core/themes/neutral.css';
@import '@neural-ng/core/themes/tailwind.css';
@import '@neural-ng/icons/icons.css';

@custom-variant dark (
  &:where([data-neural-mode='dark'], [data-neural-mode='dark'] *)
);

Optional global headless mode

Set unstyled globally when your product owns every visual decision. Semantics, behavior, structural hooks and typed class slots remain available.

import { ApplicationConfig } from '@angular/core';
import { provideNeuralNg } from '@neural-ng/core';

export const appConfig: ApplicationConfig = {
  providers: [provideNeuralNg({ unstyled: true })],
};

Primary

Surface