@neuralangular/angular-ui

v0.1.3

Published

2 days ago

Angular-first UI component library. Modern, accessible, dark-mode ready components built on Angular CDK.

0High
0Medium
0Low

joshuacba08

angular ui components design-system angular-material angular-cdk dark-mode neural

@neuralangular/angular-ui

Angular-first UI components for Neural Angular.

@neuralangular/angular-ui is the UI package for the Neural Angular ecosystem. It ships standalone Angular components, a token-driven theme layer, CDK-backed overlays, Lucide icon registration, data display primitives, media helpers, AI-oriented interaction components, and Storybook-first component documentation.

The package is intentionally Angular-native: import standalone components, register the small provider set you need, and keep application architecture in your Angular app.

Package Status

Current package version: 0.1.2.

This release exposes one TypeScript package entry point plus CSS style entry points:

@neuralangular/angular-ui
@neuralangular/angular-ui/styles
@neuralangular/angular-ui/styles/fonts
@neuralangular/angular-ui/styles/base
@neuralangular/angular-ui/styles/tokens
@neuralangular/angular-ui/styles/dark
@neuralangular/angular-ui/styles/light
@neuralangular/angular-ui/styles/material
@neuralangular/angular-ui/styles/compat

Per-component package subpath imports such as @neuralangular/angular-ui/button are not part of the published export map in 0.1.2. Import public Angular symbols from the root package entry.

Installation

pnpm add @neuralangular/angular-ui

Peer dependencies:

@angular/core ^22.0.0
@angular/common ^22.0.0
@angular/cdk ^22.0.0
@lucide/angular ^1.18.0
echarts ^6.1.0

Runtime requirement:

Node.js >=20

Styles

Import the full stylesheet once in your global application stylesheet:

@import '@neuralangular/angular-ui/styles';

The full stylesheet includes tokens, light and dark themes, Angular Material token mapping, base typography, utility styles, and overlay styles.

Use the granular CSS entry points only when you want to assemble the style layers yourself:

@import '@neuralangular/angular-ui/styles/tokens';
@import '@neuralangular/angular-ui/styles/light';
@import '@neuralangular/angular-ui/styles/dark';
@import '@neuralangular/angular-ui/styles/material';
@import '@neuralangular/angular-ui/styles/base';
@import '@neuralangular/angular-ui/styles/fonts';
@import '@neuralangular/angular-ui/styles/compat';

Fonts

The default font tokens are tuned for:

Plus Jakarta Sans for display and body text.
JetBrains Mono for code and technical labels.

Load those fonts in your app shell, or provide equivalent self-hosted @font-face declarations:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
  rel="stylesheet"
/>

If the fonts are not loaded, the CSS falls back to system-ui and the platform monospace stack.

Providers

import { provideNeuralTheme } from '@neuralangular/angular-ui';

export const appConfig = {
  providers: [
    provideNeuralTheme({
      defaultTheme: 'dark',
      storage: true,
      storageKey: 'n-theme-preference',
    }),
  ],
};

provideNeuralTheme() applies data-n-theme in the browser. You can also control the theme manually:

<html data-n-theme="dark">
  ...
</html>

import { provideNeuralIcons } from '@neuralangular/angular-ui';

export const appConfig = {
  providers: [provideNeuralIcons()],
};

Register the overlay provider when your app uses dialog, drawer, toast, tooltip, popover, command palette, speed dial, or other CDK overlay-backed primitives:

import { provideNeuralOverlay } from '@neuralangular/angular-ui';

export const appConfig = {
  providers: [provideNeuralOverlay()],
};

Basic Usage

All UI primitives are standalone Angular symbols exported from the root package entry:

import { Component } from '@angular/core';
import {
  NButton,
  NCard,
  NCardContent,
  NCardFooter,
  NCardHeader,
  NCardTitle,
  NIcon,
} from '@neuralangular/angular-ui';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [
    NButton,
    NCard,
    NCardContent,
    NCardFooter,
    NCardHeader,
    NCardTitle,
    NIcon,
  ],
  template: `
    <n-card variant="gradient" [interactive]="true">
      <n-card-header>
        <n-card-title>
          <n-icon name="sparkles" size="sm" />
          Model pipeline
        </n-card-title>
      </n-card-header>

      <n-card-content>
        The queue is healthy and all workers are available.
      </n-card-content>

      <n-card-footer>
        <n-button variant="primary" size="sm">Run pipeline</n-button>
      </n-card-footer>
    </n-card>
  `,
})
export class ExampleComponent {}

Public Import Policy

Use root imports for package consumers:

import {
  NButton,
  NCard,
  NInput,
  NSelect,
  NTable,
  provideNeuralTheme,
} from '@neuralangular/angular-ui';

The source workspace has internal folders such as packages/ui/src/button, but those folders are not published as stable package subpaths in 0.1.2.

Component Catalog

The root entry currently exports the following major areas.

| Area | Public symbols | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Theme and tokens | provideNeuralTheme, NeuralThemeService, NEURAL_THEME_CONFIG, NEURAL_DEFAULT_THEME_CONFIG, token metadata | | Icons | NIcon, provideNeuralIcons, curated Lucide icon registry and icon types | | Buttons and actions | NButton, NSplitButton, NToggleButton, NSelectButton, NSpeedDial, NSpeedDialItem | | Cards and surfaces | NCard, NCardHeader, NCardTitle, NCardDescription, NCardContent, NCardFooter, NCardIcon, NCardMeta, NCardRow, NAlert, NGlowCard, NGradientRing | | Badges and identity | NBadge, NBadgeDirective, NChip, NAvatar, NAvatarGroup, NStatusDot | | Forms | NInput, NTextarea, NPassword, NInputNumber, NInputOtp, NSelect, NAutoComplete, NMultiSelect, NListbox, NDatePicker, NColorPicker, NKnob, NSlider, NSwitch, NRating, NInputGroup, NInputGroupAddon, NIconField, NInputIcon, NFloatLabel, NInputMaskDirective | | Layout and navigation | NShell, NSidebar, NSidebarSection, NSidebarItem, NToolbar, NTabs, NTabItem, NPageHeader, NCommandBar, NBreadcrumb, NSplitView, NAccordion, NAccordionTab, NStepper, NStep | | Feedback | NProgress, NProgressRing, NSpinner, NSkeleton, NEmptyState, NToastService, NToastComponent | | Overlays | provideNeuralOverlay, NDialogService, NDialogComponent, NDrawerService, NDrawerComponent, NTooltipDirective, NTooltipComponent, NPopoverDirective, NPopoverComponent, NCommandPalette, NCommandPaletteGroup, NCommandPaletteItem | | Data display | NStatCard, NMetricCard, NDataCard, NTable, NDataView, NGridItem, NListItem, NTimeline, NTimelineItem, NTree, NTreeNodeComponent, NOrgChart, NOrgChartNodeComponent, NPickList, NJobCard | | Charts | NBarChart, NDonutChart, NSparkline, NECharts | | Media and upload | NDropzone, NFileCard, NMediaPreview, NImageCompare, formatFileSize, getFileExtension, getMediaKindFromMime, getMediaKindFromFile, matchesAccept | | AI UI | NPromptInput, NChat, NChatMessage, NStreamingText, NVoiceOrb, NAIPipeline, NAIPipelineStep, shared AI message and status types |

Component-level examples live next to the source in packages/ui/src/**/*.docs.mdx and packages/ui/src/**/*.stories.ts.

SSR Safety

The UI package is designed to be usable in Angular applications that may render on the server:

Components avoid unguarded browser globals.
Theme application is browser-scoped.
Icon registration uses Angular providers and @lucide/angular.
Overlay behavior is delegated to Angular CDK.
Media helpers avoid owning backend, object URL, upload transport, audio, canvas, and streaming integrations.

@neuralangular/angular-ui must remain independent from @neuralangular/angular-ssr.

Storybook

Run Storybook from the repository root:

pnpm nx run @neural/angular-ui:storybook

Build the static Storybook:

pnpm nx run @neural/angular-ui:build-storybook

Storybook uses co-located stories and MDX docs under packages/ui/src.

Workspace Commands

Run package tasks through Nx from the repository root:

pnpm nx run @neural/angular-ui:build
pnpm nx run @neural/angular-ui:typecheck
pnpm nx run @neural/angular-ui:test
pnpm nx run @neural/angular-ui:lint
pnpm nx run @neural/angular-ui:storybook
pnpm nx run @neural/angular-ui:build-storybook

Useful implementation files:

packages/ui/package.json defines the published package metadata and export map.
packages/ui/ng-package.json configures the Angular package build.
packages/ui/src/index.ts is the public TypeScript entry point.
packages/ui/src/styles/index.css is the full CSS entry point.

Current Limitations

Per-component published subpath exports are not exposed in 0.1.2.
Router-aware navigation remains intentionally light.
Advanced table behavior is still modest compared with a full data grid.
Upload and media components do not include backend transport, thumbnail extraction, FFmpeg, WebCodecs, or cloud storage integration.
AI components are UI primitives. They do not include model clients, speech APIs, WebSocket clients, EventSource clients, markdown rendering, or persistence.
Some newer primitives are MVP-level and should be hardened with focused API reviews before being treated as long-term stable.

Design Direction

Neural Angular UI should feel like serious developer tooling and creative software: crisp, accessible, dark-mode friendly, token-driven, and expressive without hiding Angular behind a custom framework.

The package should keep its public API small and explicit even as the component catalog grows.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@neuralangular/angular-ui

Package Status

Installation

Styles

Fonts

Providers

Basic Usage

Public Import Policy

Component Catalog

SSR Safety

Storybook

Workspace Commands

Current Limitations

Design Direction