Foundation

@kikita-labs/ui v2.0.0

Installation

Install Kikita UI from the public npm registry, wire the published stylesheet through Angular CLI, and register the provider in the consumer app.

Package registry

Kikita UI is published under the @kikita-labs scope on the public npm registry. No registry configuration or auth token is required.

terminal
pnpm add @kikita-labs/ui

Angular CLI setup

Use the package schematic when possible. It preserves existing style entries and configures the selected Angular project.

ng add @kikita-labs/ui

Manual setup

This docs app keeps the stylesheet in angular.json because that path is verified in a fresh Angular consumer build.

"styles": [
  "node_modules/@kikita-labs/ui/styles/kikita-ui.css",
  "src/styles.scss"
]

Schematic options

Use these options when a consumer app needs to control which parts of setup are written.

NameTypeDefaultDescription
--projectstring — Targets a specific Angular project when the workspace contains multiple projects.
--skip-providerboolean — Skips writing provideKikitaUi() when the app manages providers manually.
--skip-stylesboolean — Skips adding the package stylesheet to angular.json.
--themeboolean — Writes the default theme seed configuration into provideKikitaUi(). Without it Kikita UI uses the same default theme internally and adds no theme code to the app.

Styles outside the CLI

When styles are managed outside Angular CLI, import the public style entrypoint once and register the provider by hand.

@import '@kikita-labs/ui/styles';
  • kui-field and kui-icon styles live in the kui.components layer, so both need kikita-ui.css like every other component. An unlayered application rule overrides them without raising specificity.
  • theme-default.css is part of @kikita-labs/ui/styles, so the default theme works from CSS alone. The generated theme sheet sits in the kui.tokens layer, declared before kui.base and kui.components, so a variable you write outside any layer wins regardless of source order.
  • provideKikitaUi() sets data-kui-density on <html> from seeds.density, on the server too, unless the page already set it.

Icons and Content Security Policy

The default Lucide set is read at a pinned lucide-static version (1.51.0) and converted to glyph data, not inserted as trusted HTML.

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

// Serve the pinned lucide-static files yourself instead of reading them from the CDN.
export const appConfig = {
  providers: [
    provideKikitaUi({ icons: false }),
    provideKuiIcons(createKuiLucideResolver({ baseUrl: '/assets/lucide' })),
  ],
};
NameTypeDefaultDescription
KUI_LUCIDE_STATIC_VERSION'1.51.0' — Exact lucide-static version the default resolver reads. It changes only with a Kikita UI release.
createKuiLucideResolver(options?: KuiLucideResolverOptions) => KuiIconResolver — Reads another lucide-static version or origin, for self-hosted icon files.
provideKuiIcons(icons: KuiIconRegistry) => EnvironmentProviders — Registers named icons and resolvers for the injector it is provided in.
  • Allow connect-src https://cdn.jsdelivr.net in a Content Security Policy, or serve the files yourself with createKuiLucideResolver and provideKuiIcons, and opt out of the default set with provideKikitaUi({ icons: false }).
  • A name that is not a Lucide kebab-case name resolves to nothing without a request, and structural icons never use the network.

Upgrading from 1.x

Update the package and run the migration that ships with it. See the Migrating to 2.0 page for every breaking change.

ng update @kikita-labs/ui
  • The migration renames only identifiers (rename-symbols-v2) and skips strings, comments and templates. Names used through a dynamic import are not seen, so search for the old suffixes with git grep.
  • If you render on the server, check that a cache in front of it sends Vary: Accept-Language.