---
title: "CSS Customization"
icon: "lucide/Palette"
description: "Theme CopilotKit components via CSS variables and class overrides."
hideTOC: true
snippet_cell: chat-customization-css
---

## What is this?

CopilotKit has a variety of ways to customize the colors and structure of the
Copilot UI components via plain CSS. You can:

- Override CopilotKit CSS variables to re-tint the whole UI
- Target the built-in class names (`.copilotKit...`) for structural tweaks
- Swap fonts per surface (messages, input, bubbles)
- Replace icons and labels via component props

If you need to change behavior, not just look, see
[slots](/custom-look-and-feel/slots) or
[fully headless UI](/custom-look-and-feel/headless-ui).

<InlineDemo demo="chat-customization-css" />

## Scoping the theme

The demo keeps all of its styling in a sibling `theme.css` file and applies it
only to the wrapper div holding `<CopilotChat>`. Importing the stylesheet from
the page module is enough; Next.js bundles it with the route:

<Snippet region="theme-css-import" title="frontend/src/app/page.tsx — import the theme" />

Scoping every selector under a wrapper class keeps the overrides from leaking
into the rest of the app.

## CSS Variables (Easiest)

The easiest way to change the colors used in the Copilot UI components is to
override CopilotKit CSS variables. The demo sets them on the scope wrapper so
they cascade into every nested chat component:

<Snippet region="css-variables" title="frontend/src/app/theme.css — variable overrides" />

Once you've found the right variable, you can also apply the overrides inline
via the `CopilotKitCSSProperties` helper:

```tsx
import { CopilotKitCSSProperties } from "@copilotkit/react-core/v2";

<div
  style={
    {
      "--copilot-kit-primary-color": "#222222",
    } as CopilotKitCSSProperties
  }
>
  <CopilotSidebar />
</div>
```

### Reference

| CSS Variable | Description |
|-------------|-------------|
| `--copilot-kit-primary-color` | Main brand/action color — used for buttons, interactive elements |
| `--copilot-kit-contrast-color` | Color that contrasts with primary — used for text on primary elements |
| `--copilot-kit-background-color` | Main page/container background color |
| `--copilot-kit-secondary-color` | Secondary background — used for cards, panels, elevated surfaces |
| `--copilot-kit-secondary-contrast-color` | Primary text color for main content |
| `--copilot-kit-separator-color` | Border color for dividers and containers |
| `--copilot-kit-muted-color` | Muted color for disabled/inactive states |

## Custom CSS

The CopilotKit CSS is structured to allow customization via CSS classes. You
can target specific pieces of the UI from your own stylesheet:

```css title="globals.css"
.copilotKitButton {
  border-radius: 0;
}

.copilotKitMessages {
  padding: 2rem;
}

.copilotKitUserMessage {
  background: #007AFF;
}
```

The demo's `theme.css` wraps every selector under `.chat-css-demo-scope` so
the overrides don't leak out. Here's the user/assistant bubble block from
that file:

<Snippet
  file="src/app/demos/chat-customization-css/theme.css"
  lines="30-57"
  title="frontend/src/app/theme.css — user + assistant message bubbles"
/>

### Reference

| CSS Class | Description |
|-----------|-------------|
| `.copilotKitMessages` | Main container for all chat messages |
| `.copilotKitInput` | Text input container with typing area and send button |
| `.copilotKitUserMessage` | Styling for user messages |
| `.copilotKitAssistantMessage` | Styling for AI responses |
| `.copilotKitHeader` | Top bar of chat window containing title and controls |
| `.copilotKitButton` | Primary chat toggle button |
| `.copilotKitWindow` | Root container defining overall chat window dimensions |
| `.copilotKitMarkdown` | Styles for rendered markdown content |
| `.copilotKitCodeBlock` | Code snippet container with syntax highlighting |
| `.copilotKitSidebar` | Styles for sidebar chat mode |
| `.copilotKitPopup` | Styles for popup chat mode |

## Custom Fonts

You can customize the fonts by updating the `fontFamily` property on the
relevant CopilotKit classes:

```css title="globals.css"
.copilotKitMessages {
  font-family: "Arial, sans-serif";
}

.copilotKitInput {
  font-family: "Arial, sans-serif";
}
```

## Custom Icons

Customize icons by passing the `icons` prop to `CopilotSidebar`, `CopilotPopup`,
or `CopilotChat`:

```tsx
<CopilotChat
  icons={{
    openIcon: <YourOpenIconComponent />,
    closeIcon: <YourCloseIconComponent />,
  }}
/>
```

## Custom Labels

Customize all user-facing copy via the `labels` prop:

```tsx
<CopilotChat
  labels={{
    welcomeMessageText: "Hello! How can I help you today?",
    modalHeaderTitle: "My Copilot",
    chatInputPlaceholder: "Ask me anything!",
  }}
/>
```
