# Installation

Install @kitn.ai/ui and register its web components in React, Vue, Angular, Svelte, or plain HTML.

Add `@kitn.ai/ui`, register the `kai-*` elements once, and use them in any framework. SolidJS is bundled in, so the host app needs nothing else.

## Install the package

<Tabs>
<TabItem label="npm">
```sh
npm install @kitn.ai/ui
```
</TabItem>
<TabItem label="pnpm">
```sh
pnpm add @kitn.ai/ui
```
</TabItem>
<TabItem label="yarn">
```sh
yarn add @kitn.ai/ui
```
</TabItem>
</Tabs>

## Register the elements

Import the bundle once for its side effect. This registers every `kai-*` element globally — put it near your app's entry point:

```js

```

The bundle is ESM-only and works with any modern bundler (`vite`, `webpack`, `esbuild`) or directly in a `<script type="module">`. SolidJS is bundled in, so there is no extra peer dependency.

Once registered, the elements behave like any other HTML tag:

```html
<kai-chat style="display: block; height: 100vh;"></kai-chat>

<script type="module">

  await customElements.whenDefined('kai-chat');

  const chat = document.querySelector('kai-chat');

  // Arrays can't be attributes, so set messages in JavaScript.
  chat.messages = [
    { id: '1', role: 'assistant', parts: [{ type: 'text', text: 'Hello! How can I help?' }] },
  ];

  chat.addEventListener('kai-submit', (e) => {
    console.log('user sent:', e.detail.value);
  });
</script>
```

> **caution:** 
`messages`, `models`, `context`, and other array/object data must be assigned in JavaScript — HTML attributes are strings and can't carry them. Scalars like `placeholder`, `loading`, and `theme` work fine as attributes.

## Theme it

Each element injects its own scoped CSS into its Shadow DOM, so the components look right with zero stylesheets. To rebrand, set the namespaced **`--kai-color-*`** tokens on `:root` — no import needed, and the `--kai-` prefix keeps them from clashing with your app's own CSS variables:

```css
:root {
  --kai-color-background: #0f0f0f;
  --kai-color-primary: #7c3aed;
  --kai-color-muted: #1e1e1e;
}
```

Inherited custom properties cross the Shadow DOM boundary, so these reach every `kai-*` element automatically. The `--kai-` form is the one that gets there: each element's own shadow CSS declares the unprefixed `--color-*` names on `:host`, which beats anything inherited from your `:root`. Import `@kitn.ai/ui/theme.css` when you want those `--color-*` tokens for your own markup or the light-DOM SolidJS components — see [Theming](/guides/theming/) for the full token list, dark mode, and typography.

> **caution:** 
The components need no CSS import - they are shadow-isolated. Importing `theme.css` is opt-in. In a Tailwind v4 app its generic `--color-*` names merge into your `@theme` and can override your own `bg-primary`, `bg-card`, and friends (last import wins). Use the namespaced `--kai-color-*` tokens above to retheme the elements (no import); if you do import `theme.css`, import it before your own token overrides.

## Via CDN (no build step)

Load the bundle as a self-contained ES module — no install, no bundler:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kitn.ai/ui/theme.css">

<script type="module">

</script>

<kai-chat style="display: block; height: 100vh;"></kai-chat>
```

> **tip:** 
An unpinned CDN URL tracks the latest release — fine for prototyping, risky for production. The package is pre-1.0, so a minor release can break things. Pin an exact version: `https://cdn.jsdelivr.net/npm/@kitn.ai/ui@0.20.1/dist/kai.es.js`.

## SolidJS projects

Writing Solid? You can skip the web components and import the native components for full compositional control. Add the peer dependency:

```sh
npm install solid-js
```

Then import from the Solid entry (`@kitn.ai/ui/solid`), which ships compiled and tree-shakes to what you use:

```tsx

  ChatContainer,
  ChatContainerContent,
  Message,
  MessageContent,
  PromptInput,
  PromptInputTextarea,
  PromptInputActions,
} from '@kitn.ai/ui/solid';

```

`@kitn.ai/ui/solid` is the whole Solid catalog, compiled as its own bundle. It is a superset of the root `@kitn.ai/ui` entry, so one import covers the chat components, the UI primitives, and the shared types and helpers. See the [SolidJS guide](/guides/frameworks/solid/).

## Entry points

| Import path | What it provides |
|---|---|
| `@kitn.ai/ui/elements` | All the web components — registers every `kai-*` element; use in any framework. The simple default. |
| `@kitn.ai/ui/elements/<module>` | A single element module, tree-shaken. The path is the module's basename, which is usually but not always the tag minus `kai-`. See [Loading](/guides/loading/). |
| `@kitn.ai/ui/autoloader` | CDN / static auto-loader — loads each `kai-*` on demand, no build. See [Loading](/guides/loading/). |
| `@kitn.ai/ui/react` | Generated React wrappers with typed props |
| `@kitn.ai/ui/solid` | The complete SolidJS catalog — compiled, tree-shakeable; Solid projects only |
| `@kitn.ai/ui` | The shared layer every framework resolves: types, state and card helpers, and the chat components `./solid` builds on |
| `@kitn.ai/ui/state` | Pure folds over `ChatMessage[]` — `createAssistantStream`, `appendTextPart`, … See [State & hooks](/guides/state-and-hooks/) |
| `@kitn.ai/ui/wire` | The model-stream adapter — `readOpenAIStream`, `readAnthropicStream`, `toOpenAIMessages`, … See the [wire adapter recipe](/guides/recipes/wire-adapter/) |
| `@kitn.ai/ui/theme.css` | Design tokens for your own markup and the Solid components (to retheme the elements, set `--kai-color-*` with no import — see [Theming](/guides/theming/)) |
| `@kitn.ai/ui/provider` | Remote provider bundle for embedding the kit across origins |

## Next steps

With the elements registered, head to the [framework guide](/guides/frameworks/overview/) for your stack, or render your first chat in [Getting started](/guides/getting-started/). Want a different way to load — per-element or a CDN autoloader? See [Loading](/guides/loading/).