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:

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:

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

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

Reference#

v2 Design Tokens (shadcn)#

The v2 components (@copilotkit/react-core/v2) ship a Tailwind v4 theme built on the standard shadcn/ui token set. Instead of the --copilot-kit-* variables, they read oklch color tokens that are scoped to the [data-copilotkit] root and wired into Tailwind utilities through an @theme inline block. This means you can re-skin the entire v2 UI by overriding a handful of CSS custom properties. Every component picks the change up automatically.

Override them on the [data-copilotkit] element (or any ancestor) the same way you would in a shadcn project:

[data-copilotkit] {
  --primary: oklch(0.55 0.22 264); /* accent / action color */
  --primary-foreground: oklch(0.99 0 0); /* text on primary */
  --background: oklch(1 0 0); /* surface background */
  --foreground: oklch(0.145 0 0); /* primary text */
  --muted: oklch(0.97 0 0); /* subtle backgrounds */
  --border: oklch(0.922 0 0); /* dividers, outlines */
  --radius: 0.625rem; /* global corner radius */
}

/* Dark mode is keyed off a `.dark` ancestor */
.dark [data-copilotkit] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --border: oklch(0.269 0 0);
}

Reference#

These are the most commonly overridden v2 tokens. Each light value has a matching dark-mode value under .dark [data-copilotkit]. The full set (popover, accent, destructive, chart, and sidebar variants) lives in @copilotkit/react-core/v2/styles.css.

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 message bubble block from that file:

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