inqud-ui-core-angular

INQUD's Angular component library — standalone components, Angular CDK, ControlValueAccessor form controls, and shared inqud-ui-tokens design tokens. Dark theme by default, light via data-theme="light". React and Angular render identically because both consume the same tokens.

Part of the INQUD UI monorepo. Versioned to track Angular (17.x → Angular 17).

Installation

npm install inqud-ui-core-angular inqud-ui-tokens @angular/cdk

Peer dependencies: @angular/core, @angular/common, @angular/forms, @angular/cdk (^17), and inqud-ui-tokens.

Add the tokens and the CDK overlay styles once, globally (e.g. in styles.scss):

@import 'inqud-ui-tokens/tokens.css';
@import '@angular/cdk/overlay-prebuilt.css';   /* required by inqud-select (CDK Overlay) */

Usage

Components are standalone — import the ones you need directly. The button is an attribute-selector component (styles a real <button> or <a> — the idiomatic Angular equivalent of Radix asChild):

import { Component } from '@angular/core'
import { ReactiveFormsModule, FormControl } from '@angular/forms'
import {
  InqudButtonComponent,
  InqudInputComponent,
  InqudSelectComponent,
  InqudCheckboxComponent,
} from 'inqud-ui-core-angular'

@Component({
  standalone: true,
  imports: [
    ReactiveFormsModule,
    InqudButtonComponent,
    InqudInputComponent,
    InqudSelectComponent,
    InqudCheckboxComponent,
  ],
  template: `
    <button inqudButton variant="primary">Save</button>
    <a inqudButton variant="outline" href="/docs">Docs</a>

    <inqud-input label="Email" placeholder="[email protected]" [formControl]="email"></inqud-input>

    <inqud-select label="Currency" [options]="currencies" [formControl]="currency"></inqud-select>

    <inqud-checkbox [formControl]="agree">
      I agree to the <a href="/terms">terms</a>
    </inqud-checkbox>
  `,
})
export class DemoComponent {
  email = new FormControl('')
  currency = new FormControl('btc')
  agree = new FormControl(false)
  currencies = [
    { value: 'btc', label: 'Bitcoin' },
    { value: 'eth', label: 'Ethereum' },
  ]
}

The form controls (inqud-input, inqud-input-password, inqud-totp-input, inqud-checkbox, inqud-select) implement ControlValueAccessor, so they work with [(ngModel)], [formControl], and formControlName.

Components

Button, Badge, Alert, Spinner, Divider, Checkbox, Select, Input, Input Password (with optional password-strength requirement chips), TOTP Input.

Full inputs/outputs and live examples are in Storybook (npm run storybook:angular).

Theming

Set data-theme="light" on a parent element to switch from the default dark theme, or override any --inqud-* custom property in your own CSS.

License

MIT