Customize Built In Ui Components

import { CopilotKitCSS, InteractiveCSSInspector } from "@/components/react/copilotkit-css";

CopilotKit has a variety of ways to customize colors and structures of the Copilot UI components.

• CSS Variables
• Custom CSS
• Custom Icons
• Custom Labels

If you want to customize the style as well as the functionality of the Copilot UI, you can also try the following:

• Custom Sub-Components
• Fully Headless UI

CSS Variables (Easiest)

The easiest way to change the colors using in the Copilot UI components is to override CopilotKit CSS variables.

Once you've found the right variable, you can import CopilotKitCSSProperties and simply wrap CopilotKit in a div and override the CSS variables.

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

<div
  // [!code highlight:5]
  style={
    {
      "--copilot-kit-primary-color": "#222222",
    } as CopilotKitCSSProperties
  }
>
  <CopilotSidebar .../>
</div>

Reference

Custom CSS

In addition to customizing the colors, the CopilotKit CSS is structured to easily allow customization via CSS classes.

.copilotKitButton {
  border-radius: 0;
}

.copilotKitMessages {
  padding: 2rem;
}

.copilotKitUserMessage {
  background: #007AFF;
}

Reference

Custom Fonts

You can customize the fonts by updating the fontFamily property in the various CSS classes that are used in the CopilotKit.

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

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

Reference

You can update the main content classes to change the font family for the various components.

Custom Icons

You can customize the icons by passing the icons property to the CopilotSidebar, CopilotPopup or CopilotChat component.

<CopilotChat
  icons={{
    // Use your own icons here – any React nodes
    openIcon: <YourOpenIconComponent />,
    closeIcon: <YourCloseIconComponent />,
  }}
/>

Reference

Custom Labels

To customize labels, pass the labels property to the CopilotSidebar, CopilotPopup or CopilotChat component.

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

Reference