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.
Headless
Just the behaviour layer. Directives expose ARIA semantics and data-* hooks; you bring the CSS (Tailwind, design tokens, plain stylesheets — anything).
Angular 21+ only. Standalone components, signals throughout, zero peer dependencies.
Global stylesheets
Register these once in angular.json. The two overlay.css entries are what paint every floating panel — popover, tooltip, dropdown menu, dialog, drawer, toast, confirm popup, sheet.
Overlay panels need these. Every panel is rendered by a headless directive (<kj-popover-content>, <kj-dropdown-menu-content>, …), and directives carry no styles. Skip the overlay stylesheets and a panel composed straight from the directives comes up with no background, no border and no shadow — even though the markup is correct. Wrapper components such as <kj-popover> inline the same CSS, so a page that happens to render one looks fine while the rest do not.
Quick start
Import directive directly — no NgModules needed.
Headless usage
The core package ships zero CSS. Directives add ARIA attributes and data-* attributes you can target in your stylesheets:
Angular forms
Form controls compose KjFormControl via hostDirectives, so they work with reactive forms out of the box:
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:
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.