CSS Customization

"""Default LangGraph agent — neutral "helpful, concise assistant".This is the fallthrough graph for demos that don't require anything morespecialized. Cells that need tailored behavior (chart viz, weather-only,etc.) should have their own dedicated graph under `src/agents/` andexplicit wiring in the CopilotKit route."""from langchain.agents import create_agentfrom langchain_openai import ChatOpenAIfrom copilotkit import CopilotKitMiddlewaregraph = create_agent(    model=ChatOpenAI(model="gpt-5.4"),    tools=[],    middleware=[CopilotKitMiddleware()],    system_prompt="You are a helpful, concise assistant.",)

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:

page.tsx

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:

Missing snippet

Region css-variables not found in langgraph-python::chat-customization-css. Tag the relevant source lines with // @region[css-variables] / // @endregion[css-variables].

Available: theme-css-import, google-fonts, design-tokens, v2-token-overrides, chat-shell, welcome, messages-container, user-message, assistant-message, input-composer, input-buttons, suggestions, scrollbar, selection, motion

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#

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:

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:

theme.css

  --halcyon-rule: #d6cfbe;  --halcyon-rule-strong: #aea48a;  --halcyon-ink: #1a1714;  --halcyon-ink-soft: #3d362e;  --halcyon-ink-mute: #7a7468;  --halcyon-ember: #c44a1f;  --halcyon-ember-bright: #e45f2b;  --halcyon-ember-soft: #f3d7c5;  --halcyon-champagne: #98794a;  --halcyon-display:    "Instrument Serif", ui-serif, "Iowan Old Style", Georgia, serif;  --halcyon-serif:    "Fraunces", "Source Serif Pro", ui-serif, Georgia, "Times New Roman", serif;  --halcyon-sans:    "Inter Tight", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",    sans-serif;  --halcyon-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;  --halcyon-shadow-soft:    0 1px 0 rgba(26, 23, 20, 0.04), 0 12px 32px -18px rgba(26, 23, 20, 0.18);  --halcyon-shadow-ember:    0 1px 0 rgba(196, 74, 31, 0.18), 0 14px 36px -16px rgba(196, 74, 31, 0.42);}/* CopilotKit v2 reads these on the [data-copilotkit] root inside the chat. * Re-pointing them under our scope retints every Tailwind utility the

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:

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:

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

CSS Customization

What is this?#

Scoping the theme#

CSS Variables (Easiest)#

Reference#

Custom CSS#

Reference#

Custom Fonts#

Custom Icons#

Custom Labels#

On this page