Schematics

Choose manual or CLI setup

Core includes five Angular CLI schematics: ng-add, theme, layout, dashboard and crud-page. Run them from the workspace directory that contains angular.json, with the Angular 22 CLI and required peers installed. Replace neural-app with your application project name from angular.json. In a multi-project workspace, always pass --project for application generators; without it they choose the first application. The theme generator instead takes an explicit --path.

Choose either manual installation or ng add. Both use the same public package and component APIs. Schematics are optional development tools, not runtime dependencies or a requirement for using Neural components.

Configure an application

ng add installs the selected Core version and runs ng-add. It appends node_modules/@neural-ui/core/styles.scss to the application's build styles and adds provideNeuralUI() to the bootstrap configuration without replacing existing styles or providers. It does not generate a component or configure icons, routes, SSR, dark mode or application translations. Check the resulting diff before continuing.

npx ng add @neural-ui/core@^2 --project=neural-app

If Core is already installed

If Core is already installed, this command runs only its configuration schematic and retains the installed version. Do not run both installation alternatives. If your global SCSS already imports @neural-ui/core/styles, pass --skipStyles to avoid a second global stylesheet entry. This flag skips styles only; provider setup still runs. Repeated runs avoid duplicating the stylesheet entry and an existing provideNeuralUI() call. In multi-application workspaces, verify each application's providers: an existing call anywhere in the workspace currently suppresses another automatic provider insertion.

npx ng generate @neural-ui/core:ng-add --project=neural-app

ng-add options

These options belong to the packaged ng-add schematic. Angular CLI also provides command-level options such as --dry-run for ng generate. If a project name cannot be found, use the exact key from angular.json rather than its folder name.

Generate theme styles

This example creates src/styles/product-theme.scss. The file imports Core styles, records the chosen density and theme in application CSS variables, and includes an HTML attribute example. It is an SCSS starter, not a defineNeuPreset definition. It does not register the generated file, change document attributes or activate a theme automatically. Load it deliberately through your global SCSS or build styles if you use it, avoiding a duplicate global Core stylesheet. Existing files are left unchanged unless --force is supplied.

npx ng generate @neural-ui/core:theme \
  --name=product-theme \
  --path=src/styles \
  --density=compact \
  --theme=high-contrast

Theme options

The name determines the SCSS filename; path is relative to the workspace root. The defaults do not choose a light/dark mode. Use the Themes guide for token presets and data-theme for mode selection.

Apply the density and contrast

Core styles already contain the density and high-contrast rules. Apply the attributes to html or a scoped application container. The generated --app-neu-* variables record your choices but do not apply these attributes. Dark mode is independent: use data-theme="dark" where needed, as explained in Themes.

<main data-neu-density="compact" data-neu-theme="high-contrast">
  <!-- Your application content -->
</main>

Generate application pages

Each command creates a standalone OnPush component with a TypeScript, HTML and SCSS file. By default they are placed under the selected application's app/pages directory, in a folder matching the name. layout composes Sidebar, Toolbar and RouterOutlet; dashboard provides StatsCard and Card placeholders; crud-page provides Button, a Signal Forms search field and an empty keyed Table. These are editable starting points: no API client, persistence, search filtering or create/edit/delete handlers are generated. Customize the columns, data, actions and navigation for your application.

npx ng generate @neural-ui/core:layout app-shell --project=neural-app
npx ng generate @neural-ui/core:dashboard overview --project=neural-app
npx ng generate @neural-ui/core:crud-page customers --project=neural-app

Page options

The same options apply to layout, dashboard and crud-page. --force can overwrite generated files, including your later edits; inspect a dry run and keep a recoverable copy first. These generators do not register routes or component imports in an existing parent.

Connect a generated page

For the generated overview dashboard, add this route alongside your existing routes, not instead of them. The class name combines the chosen name and generator kind: OverviewDashboardComponent, AppShellLayoutComponent or CustomersCrudPageComponent for the commands above. Ensure app.config.ts provides provideRouter(routes). If rendering the component directly instead, import its generated class in the parent and use its app-overview selector. A generated layout's RouterOutlet also needs your application's child routes.

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'overview',
    loadComponent: () =>
      import('./pages/overview/overview.component').then(
        (page) => page.OverviewDashboardComponent,
      ),
  },
];

Verify and customize

Inspect --help and use --dry-run before generating into an existing project. Build the application, start it, visit the registered route and test keyboard, value changes and responsive layout. A successful generation is not proof that application behavior is implemented. For crud-page, typing should update its searchData signal; connecting that value to filtering and a backend remains application work. Follow the component API and accessibility sections when completing each page.

npx ng generate @neural-ui/core:crud-page --help
npx ng generate @neural-ui/core:crud-page customers \
  --project=neural-app --dry-run
npx ng build neural-app
npx ng serve neural-app