`ChatBotWidget` accepts a `theme` prop that merges with the built-in defaults so you can restyle the widget without touching CSS.
npm install kai-chat-botChatBotWidget accepts a theme prop that merges with the built-in defaults so you can restyle the widget without touching CSS.
``tsx
import { ChatBotWidget, defaultChatTheme } from "kai-chat-bot/react";
const customTheme = {
...defaultChatTheme,
primaryColor: "#4b2c5a",
secondaryColor: "#f3e8ff",
primaryButtonColor: "#8f5cf3",
chatButton: {
background: "#8f5cf3",
color: "#fff",
text: "💠",
},
header: {
logo: "/brand/logo.svg",
title: { text: "Lilac AI", color: "#4b2c5a" },
},
suggestions: {
heading: "Need inspiration?",
items: ["Plan a purple wedding", "Share budget tips"],
},
};
export function App() {
return (
orgToken="..."
userId="user-123"
theme={customTheme}
/>
);
}
`
You can provide only the keys you want to override; the widget deep-merges them with the default theme. See src/react/types/theme.ts for the full list of customizable fields.
- Core palette (required): primaryColor, secondaryColor, primaryButtonColor, primaryTextColor (plus optional secondaryButtonColor, secondaryTextColor).logo
- Header: (image URL), title.text, title.color, wrapperBackground.topSection.maintext.text/color
- Top section: , topSection.subtext.text/color.suggestions.heading
- Suggestions carousel: , suggestions.headingColor, suggestions.items, suggestions.color, suggestions.cardBackground, suggestions.cardShadow.userBubble.wrapperBackground
- User/bot bubbles: , userBubble.spanBackground, userBubble.wrapperBorder; botBubble.background, botBubble.color, botBubble.border, botBubble.accentColor.actionButtonPrompts.border
- Action prompts: , actionButtonPrompts.background, actionButtonPrompts.textcolor.datePicker.navButtons
- Date picker: , headerLabel, dayLabels, dates.background.{selected/notSelected}, dates.color.*, button.{border,activeBG,color}.optionActions.backgroundActive
- Option actions: , borderActive, color, and nested confirmButton (border, background, color).chatButton.background
- Chat button: , chatButton.color, chatButton.text.mainWrapper.background
- Main wrapper: plus mainWrapper.aiThinking (color, background, border`).