@arclux/arc-ui-angular

Angular standalone component wrappers for ARC UI web components.

Auto-generated — this package is produced by Prism from the canonical source in @arclux/arc-ui. Do not edit by hand.

Installation

npm install @arclux/arc-ui-angular @arclux/arc-ui lit

Requires @angular/core >= 17.0.0.

Usage

import { Component } from '@angular/core';
import { Button, Card, Input } from '@arclux/arc-ui-angular';

@Component({
  standalone: true,
  imports: [Button, Card, Input],
  template: `
    <arc-button variant="primary" (click)="onClick()">Get Started</arc-button>
    <arc-card>
      <h3>Card Title</h3>
      <p>Card content.</p>
    </arc-card>
    <arc-input label="Email" type="email" placeholder="[email protected]"></arc-input>
  `,
})
export class AppComponent {
  onClick() {
    console.log('clicked');
  }
}

Components are organized by tier and can be imported from subpaths:

import { Button } from '@arclux/arc-ui-angular/input';
import { Card }   from '@arclux/arc-ui-angular/content';
import { AppShell } from '@arclux/arc-ui-angular/layout';

Events

Each component exposes its arc-* CustomEvents as camelCase @Output() emitters (arc-input → (arcInput), arc-select → (arcSelect), …). The emitted value is the original CustomEvent; payloads are on event.detail:

<arc-input label="Email" (arcInput)="onInput($event)"></arc-input>

Server-side rendering

The wrappers register custom elements on import, which requires a DOM. With Angular Universal / SSR, render them client-side only.

Theming

Components read design tokens from CSS custom properties. Overriding the base accent tokens re-themes every component — see the theming guide:

:root {
  --accent-primary: rgb(77, 126, 247);
  --accent-primary-rgb: 77, 126, 247;
}

Links

• Documentation & interactive examples
• Canonical source (@arclux/arc-ui)
• Repository
• License (MIT)