Kikita UI

Angular 22+ UI library and design system package for accessible, themeable product interfaces.

Features

• Accessible components built on native HTML semantics, with Angular CDK and Angular Aria for complex behavior.
• Signals and Signal Forms first.
• Theming through CSS variables and generated design tokens.
• Provider-based defaults, structural icons and runtime i18n.
• SSR and hydration support.

Links

• Documentation: https://kikita-labs.github.io/kikita-ui-docs/
• npm package: https://www.npmjs.com/package/@kikita-labs/ui
• Repository: https://github.com/kikita-labs/kikita-ui
• AI agent docs: https://kikita-labs.github.io/kikita-ui-docs/llms.txt
• Local MCP server: https://www.npmjs.com/package/@kikita-labs/ui-mcp

Install

Published on the public npm registry. No registry configuration or auth token is required:

npm install @kikita-labs/ui

Angular CLI setup:

ng add @kikita-labs/ui

The schematic adds @kikita-labs/ui/styles to the selected application and registers provideKikitaUi() in app.config.ts.

Requirements

• Angular 22+ (core, common, forms, platform-browser) and Angular CDK 22+
• RxJS 7.8+

Tested in Chromium, Firefox and WebKit (the Chrome, Edge, Firefox and Safari engines).

Styles

Import the runtime CSS variable/component style entrypoint once in the app:

@import '@kikita-labs/ui/styles';

Angular Setup

import { provideKikitaUi } from '@kikita-labs/ui';

export const appConfig = {
  providers: [provideKikitaUi()],
};

Usage

import { Component } from '@angular/core';
import { KuiButton } from '@kikita-labs/ui';

@Component({
  selector: 'app-save',
  imports: [KuiButton],
  template: `<button kuiButton appearance="success" iconStart="check">Save</button>`,
})
export class Save {}

Every component has examples and an API table in the documentation.

Upgrading from 1.x

Run the migration schematic:

ng update @kikita-labs/ui

The migration guide lists the renamed exports.

Support

Questions and ideas: GitHub Discussions. Bugs: issues.

License

MIT