---
title: "Slots"
icon: "lucide/Brush"
description: "Customize CopilotKit's built-in UI components using the slot system."
hideTOC: true
---
import { IntegrationGrid } from "@/components/content/integration-grid";

## What is this?

Slots let you customize CopilotKit's pre-built chat components without building everything from scratch. Override specific parts of the UI — message bubbles, input areas, headers — while keeping the rest of the default behavior.

## When should I use this?

Use slots when you want to:
- Customize specific parts of the chat UI (e.g. message rendering, input area)
- Match your app's design system without building a fully custom chat
- Add custom elements like typing indicators, avatars, or action buttons

## Get started by choosing your AI backend

<IntegrationGrid path="custom-look-and-feel/slots" />
