CSS Customization

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 or fully headless UI.

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:

import "./theme.css";

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:

/* CopilotKit CSS variable overrides (accent colors, etc.) */
.chat-css-demo-scope {
  --copilot-kit-primary-color: #ff006e;
  --copilot-kit-contrast-color: #ffffff;
  --copilot-kit-background-color: #fff8f0;
  --copilot-kit-input-background-color: #fef3c7;
  --copilot-kit-secondary-color: #fde047;
  --copilot-kit-secondary-contrast-color: #2c1810;
  --copilot-kit-separator-color: #ff006e;
  --copilot-kit-muted-color: #c2185b;
}

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

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

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

Reference#

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:

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

.chat-css-demo-scope .copilotKitMessage.copilotKitUserMessage {
  background: linear-gradient(135deg, #ff006e 0%, #c2185b 100%);
  color: #ffffff;
  font-family: "Georgia", "Cambria", "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 22px 22px 4px 22px;
  box-shadow: 0 6px 16px rgba(255, 0, 110, 0.35);
  border: 2px solid #ff6fa5;
  letter-spacing: 0.01em;
}

/* Assistant message bubble – amber, monospace, boxy, dark text */
.chat-css-demo-scope .copilotKitMessage.copilotKitAssistantMessage {
  background: #fde047;
  color: #1e1b4b;
  font-family:
    "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  padding: 16px 20px;
  border-radius: 4px 22px 22px 22px;
  border: 2px solid #1e1b4b;
  box-shadow: 4px 4px 0 #1e1b4b;
  max-width: 80%;
  margin-right: auto;
  margin-bottom: 1rem;
}

Reference#

Custom Fonts#

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

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

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

Custom Labels#

Customize all user-facing copy via the labels prop:

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