Getting started

Install, import one component, ship.

Every component is standalone. There is no module to import, no global config to register, and nothing to bootstrap before first use.

Install

terminal
npm i hellskitchen-ui
# or
pnpm add hellskitchen-ui

Declare the layer order

There is no stylesheet to import — every component carries its own CSS. The one line worth adding declares cascade layer order, so your overrides beat the component defaults instead of depending on bundle order. Skip it and everything still works; which rule wins just stops being predictable.

src/styles.css
/* styles.css */
@layer components, utilities;

Use a component

settings.component.ts
import { Component, signal } from '@angular/core';
import { HkButtonComponent } from 'hellskitchen-ui';

@Component({
  selector: 'app-settings',
  imports: [HkButtonComponent],
  template: `
    <hk-button variant="solid" tone="brand" [loading]="saving()" (pressed)="save()">
      Save changes
    </hk-button>
  `
})
export class SettingsComponent {
  readonly saving = signal(false);
  save() { this.saving.set(true); }
}

That is the whole setup. Import what you use; the bundler drops the rest.

Requirements

DependencyVersionNote
Angular 19.0 or newer Standalone components and signal inputs are used throughout
TypeScript 5.6 or newer Matches the Angular 19 requirement
Runtime deps none No CDK, no RxJS operators beyond what Angular already ships
Next Theming