Get started with @artificialsenselabs/ui

Prerequisites

Angular 21+ standalone application. ArtificialSense UI is built for zoneless change detection, OnPush, and SSR — match that shape for the smoothest integration.

Install packages

Add the component library and design tokens. Tokens define every `--sense-*` CSS custom property the components expect.

npm install @artificialsenselabs/ui @artificialsenselabs/tokens

Load design tokens globally

Import tokens once in your global stylesheet so semantic colours, spacing, and typography are available to every component.

@use '@artificialsenselabs/tokens' as tokens;

Enable zoneless change detection (recommended)

Register zoneless CD in `app.config.ts`. Components use signals — no `zone.js`, no `markForCheck()`.

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    // provideRouter(routes), provideClientHydration(), …
  ],
};

Import a component

v0.1 exports eleven primitives (button, input, select, checkbox, alert, badge, spinner, and more). Import standalone components into your own standalone component.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SenseButtonComponent } from '@artificialsenselabs/ui';

@Component({
  standalone: true,
  imports: [SenseButtonComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<sense-button variant="filled">Save</sense-button>`,
})
export class ExampleComponent {}

Run the app and verify

Start your dev server, confirm the button renders with token-driven styles, and check the browser console for hydration or import errors. If styles look unstyled, tokens are not loaded globally.

ng serve