@neural-ui/core

Modern Angular UI component library — signals-first, fully standalone, with dedicated subpath entry points and no Zone.js requirement.
Built for Angular 19–22 with OnPush change detection and no Zone.js requirement.

Live documentation and examples → neural-ui-three.vercel.app

Features

• 50+ entry points — components, overlays, data display primitives, utilities, and styles
• Signals API — inputs, outputs and internal state are built with input(), output(), signal(), computed() and effect()
• Standalone — every component is standalone, import only what you need
• OnPush everywhere — maximum performance out of the box
• Accessible by design — ARIA attributes, keyboard navigation and focus management across the main interactive components
• Well-tested — 1615 passing tests with 96.75% statements coverage, 95.67% branch coverage and 94.98% function coverage
• Themeable — full design token system via CSS custom properties

Quality Snapshot

• Signals-first architecture across ui-core
• Standalone + OnPush component model
• Zoneless-oriented test setup
• Global coverage above 90% in all main metrics
• Strong accessibility baseline validated in showcase and reinforced in core components

For the current quality checklist and accessibility audit snapshot, see QUALITY_STATUS.md.

Installation

npm install @neural-ui/core @angular/cdk @ng-icons/core @ng-icons/lucide apexcharts ng-apexcharts

Setup

Add provideNeuralUI() to your app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideNeuralUI } from '@neural-ui/core';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideNeuralUI()],
};

Optionally customize global icon defaults:

provideNeuralUI({ iconSize: '1rem', iconStrokeWidth: '1.5' });

Import the global stylesheet in your styles.scss:

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

Component APIs are imported from dedicated subpaths. The package root is reserved for setup utilities such as provideNeuralUI().

import { NeuButtonComponent } from '@neural-ui/core/button';
import { NeuInputComponent } from '@neural-ui/core/input';
import { NeuTableComponent } from '@neural-ui/core/table';
import { NeuToastService } from '@neural-ui/core/toast';

Usage

Import any component directly into your standalone component:

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NeuButtonComponent } from '@neural-ui/core/button';
import { NeuInputComponent } from '@neural-ui/core/input';

@Component({
  imports: [NeuButtonComponent, NeuInputComponent, ReactiveFormsModule],
  template: `
    <neu-input label="Email" type="email" [formControl]="email" />
    <neu-button variant="primary" (click)="submit()">Send</neu-button>
  `,
})
export class LoginComponent {
  email = new FormControl('');
}

Components

Representative entry points in 1.4.0:

• Forms: @neural-ui/core/input, @neural-ui/core/select, @neural-ui/core/multiselect, @neural-ui/core/autocomplete, @neural-ui/core/date-input, @neural-ui/core/number-input, @neural-ui/core/input-otp
• Navigation and layout: @neural-ui/core/tabs, @neural-ui/core/nav, @neural-ui/core/sidebar, @neural-ui/core/accordion, @neural-ui/core/toolbar, @neural-ui/core/dashboard-grid
• Data and overlays: @neural-ui/core/table, @neural-ui/core/modal, @neural-ui/core/popover, @neural-ui/core/context-menu, @neural-ui/core/command-palette, @neural-ui/core/virtual-list, @neural-ui/core/confirm-dialog
• Feedback and utilities: @neural-ui/core/alert, @neural-ui/core/toast, @neural-ui/core/tooltip, @neural-ui/core/block-ui, @neural-ui/core/url-state
• Visualization and display: @neural-ui/core/chart, @neural-ui/core/stats-card, @neural-ui/core/timeline, @neural-ui/core/timeline-grid, @neural-ui/core/scheduler-gantt, @neural-ui/core/meter-group, @neural-ui/core/knob

For the complete catalog, examples, and API tables, use the live docs at neural-ui-three.vercel.app.

Highlights in 1.4.0

• NeuAutocompleteComponent supports virtual scroll for large result sets.
• @neural-ui/core/modal now includes NeuDialogService for programmatic dialogs.
• @neural-ui/core/scheduler-gantt adds a date-driven planning layer on top of timeline-grid for roadmap and delivery views.
• Select, multiselect, tabs, table, modal and URL-state flows were hardened with focused regression coverage.

Theming

All visual properties are controlled via CSS custom properties. Override them in your global stylesheet:

:root {
  --neu-primary: #2563eb;
  --neu-primary-dark: #1d4ed8;
  --neu-primary-50: #eff6ff;
  --neu-surface: #ffffff;
  --neu-surface-2: #f8fafc;
  --neu-border: rgba(15, 23, 42, 0.08);
  --neu-text: #0f172a;
  --neu-text-muted: #64748b;
  --neu-success: #10b981;
  --neu-warning: #f59e0b;
  --neu-error: #ef4444;
  --neu-radius: 10px;
  --neu-space-4: 1rem;
  --neu-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  --neu-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

For the full token list, see styles/_tokens.scss in the published package source.

Peer dependencies

| Package | Required version | | ------------------ | ------------------ | | @angular/core | >=19.0.0 <23.0.0 | | @angular/cdk | >=19.0.0 <23.0.0 | | @angular/common | >=19.0.0 <23.0.0 | | @angular/forms | >=19.0.0 <23.0.0 | | @angular/router | >=19.0.0 <23.0.0 | | @ng-icons/core | >=33.0.0 | | @ng-icons/lucide | >=33.0.0 | | apexcharts | >=5.0.0 | | ng-apexcharts | >=2.0.0 |

License

MIT © Pedro Moreno Trujillo