Guide

Getting Started

kouji-ui is a headless Angular 21 UI library. The core has zero CSS — bring your own styles.

Installation

Two paths — pick one, mix as you grow.

Styled

Drop-in ready. Behaviour, styled wrappers, and the 13 themes. Pick a theme with [data-theme="kouji"] on <html> and ship.

Loading editor

Headless

Just the behaviour layer. Directives expose ARIA semantics and data-* hooks; you bring the CSS (Tailwind, design tokens, plain stylesheets — anything).

Loading editor

Angular 21+ only. Standalone components, signals throughout, zero peer dependencies.

Quick start

Import directive directly — no NgModules needed.

Loading editor

Headless usage

The core package ships zero CSS. Directives add ARIA attributes and data-* attributes you can target in your stylesheets:

Loading editor

Angular forms

Form controls compose KjFormControl via hostDirectives, so they work with reactive forms out of the box:

Loading editor

Accessibility

Every component targets WCAG 2.1 AAA. Keyboard interactions, ARIA patterns, and focus management are baked into the headless primitives.

Use the a11y utilities to enhance your own components:

Loading editor

All overlay components (Dialog, Menu, Select) compose KjFocusTrap, KjRovingTabindex, and KjLiveRegion from @kouji-ui/core for full keyboard + screen-reader support — verified against NVDA, JAWS, and VoiceOver.