CSS Customization - Copilotkit

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:

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:

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

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

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

.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!",
  }}
/>