Skip to main content

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):

/* 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