Documentation

Build with it in five minutes

67 standalone Angular components, MIT licensed, themed through eight CSS custom properties. No module to import, no config to register, no licence key to paste.

Install

terminal

npm i hellskitchen-ui

Declare the layer order

src/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 tone="brand" [loading]="saving()" (pressed)="save()">Save</hk-button>`
})
export class SettingsComponent {
  readonly saving = signal(false);
  save() { this.saving.set(true); }
}

Guides

Getting started

Install, import one component, ship.

Theming

Eight custom properties, no compile step.

Motion

How transitions are timed, and how to turn them off.

Accessibility

What is guaranteed, and what is still on you.

Coming from PrimeNG

What maps across, and what deliberately does not.

Global tokens

Every component derives from these. Component-specific tokens are listed on each component's page and all fall back to one of them.

Property	Default	Controls
--hk-accent	#dc2626	Primary accent for fills, rails and focus rings.
--hk-accent-soft	rgb(220 38 38 / 0.16)	Tinted background for subtle variants and chips.
--hk-surface	#0b0b0c	Component background.
--hk-border	rgb(255 255 255 / 0.10)	Hairline borders and dividers.
--hk-text	#f5f5f5	Foreground text colour.
--hk-radius	12px	Corner radius scale. Every component derives from it.
--hk-density	1	Multiplier on internal padding. 0.7 is compact, 1.6 is roomy.
--hk-motion	200ms	Base transition duration. Set to 0 to disable animation.

Components with live demos

Browse all 67 components