---
id: aikit-css-variables
title: Theming (CSS variables)
slug: /ai-kit/css-variables
sidebar_position: 45
description: Customize AI‑Kit UI styling via --ai-kit-* design tokens.
tags: [ai-kit, css, theming, design-tokens]
hide_title: true
---

## Theming with `--ai-kit-*` CSS variables

AI‑Kit UI components (AI‑Kit Feature and Chatbot) expose a set of **CSS design tokens** that you can override from your theme or custom CSS.

Most variables are defined on these roots:

- `#ai-kit-inline-root` — inline Feature UIs and the Chatbot
- `#ai-kit-portal-root` — modal Feature UIs

If you are unsure which root your page uses, you can safely override tokens on both.

---

## Quick start

Add the following to your theme CSS (or **Appearance → Customize → Additional CSS**):

```css
/* Global tweaks */
#ai-kit-inline-root,
#ai-kit-portal-root {
  --ai-kit-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ai-kit-radius: 8px;                 /* Feature panel corners */
  --ai-kit-chat-border-radius: 12px;    /* Chat window corners */
  --ai-kit-chat-width: 520px;
}

/* Make the launcher match your brand */
#ai-kit-portal-root {
  --ai-kit-launcher-bg: #0ea5e9;
  --ai-kit-launcher-bg-hover: #0284c7;
  --ai-kit-user-bubble-bg: #0ea5e9;
}
```

---

## Token reference

Below is a practical overview of the available tokens.

### Typography

- `--ai-kit-font-family`
- `--ai-kit-font-size`
- `--ai-kit-font-size-sm`
- `--ai-kit-font-size-xs`
- `--ai-kit-font-size-title`
- `--ai-kit-line-height`

### Spacing

- `--ai-kit-space-1` … `--ai-kit-space-5`
- `--ai-kit-spacing-sm` / `--ai-kit-spacing-md` / `--ai-kit-spacing-lg` (back‑compat aliases)

### Radius

- `--ai-kit-radius` — default radius used by Feature surfaces (default is squared corners)
- `--ai-kit-radius-sm` — commonly used for secondary surfaces
- `--ai-kit-radius-pill`
- `--ai-kit-radius-round`
- `--ai-kit-launcher-radius` — launcher/button radius (can be independent from `--ai-kit-radius`)

### Semantic colors

These are the “meaningful” colors AI‑Kit uses internally (many default to Mantine variables when present):

- `--ai-kit-color-text`
- `--ai-kit-color-text-muted`
- `--ai-kit-color-border`
- `--ai-kit-color-border-muted`
- `--ai-kit-color-surface` / `--ai-kit-color-surface-2` / `--ai-kit-color-surface-3`
- `--ai-kit-color-danger` / `--ai-kit-color-warning` / `--ai-kit-color-success`
- `--ai-kit-color-primary`
- `--ai-kit-color-primary-hover`
- `--ai-kit-color-primary-contrast`

### Shadows

- `--ai-kit-shadow-sm`
- `--ai-kit-shadow-sm-hover`

### Feature border animation

Used by the animated Feature border (if enabled in your UI build):

- `--ai-kit-border-width`
- `--ai-kit-border-color`
- `--ai-kit-border-thickness`
- `--ai-kit-border-speed`
- `--ai-kit-border-angle`
- `--ai-kit-border-gradient`

### Position, size and layering

- `--ai-kit-position-z-index`
- `--ai-kit-open-button-offset-x`
- `--ai-kit-open-button-offset-y`
- `--ai-kit-chat-launcher-size`
- `--ai-kit-chat-width`
- `--ai-kit-chat-height-min`
- `--ai-kit-chat-height-max`
- `--ai-kit-chat-height-cap`

### Launcher and chat surface

- `--ai-kit-launcher-bg`
- `--ai-kit-launcher-color`
- `--ai-kit-launcher-bg-hover`
- `--ai-kit-launcher-shadow`
- `--ai-kit-launcher-shadow-hover`

- `--ai-kit-chat-surface`
- `--ai-kit-chat-surface-subtle`
- `--ai-kit-chat-border-color`
- `--ai-kit-chat-border-radius`
- `--ai-kit-chat-icon-color`

### Chat status, bubbles and markdown

- `--ai-kit-chat-status-bg`
- `--ai-kit-chat-status-fg`

- `--ai-kit-user-bubble-bg`
- `--ai-kit-user-bubble-color`
- `--ai-kit-assistant-bubble-bg`
- `--ai-kit-assistant-bubble-color`

- `--ai-kit-chat-code-bg`
- `--ai-kit-chat-pre-bg`

### Chat buttons and feedback

- `--ai-kit-chat-close-bg`
- `--ai-kit-chat-close-bg-hover`
- `--ai-kit-chat-typing-dot-color`

- `--ai-kit-chat-feedback-bg`
- `--ai-kit-chat-feedback-border`
- `--ai-kit-chat-feedback-active-bg`