Styling

Basic Theming

Customize the widget position and color mode with the theme prop:

<YakProvider
  theme={{
    position: "right", // or "left"
    colorMode: "system" // "light", "dark", or "system" (default)
  }}
  {...props}
>
  <YakWidget />
</YakProvider>

Theme Options

Option	Type	Default	Description
`position`	`"right"` \| `"left"`	`"right"`	Widget position on the screen. For chatbox this is the corner, for drawer this is the side.
`colorMode`	`"light"` \| `"dark"` \| `"system"`	`"system"`	Force a specific color mode or follow system preference
`displayMode`	`"chatbox"` \| `"drawer"`	`"chatbox"`	Display as a floating chatbox or a full-height side drawer
`light`	`ThemeColors`		Color customization for light mode
`dark`	`ThemeColors`		Color customization for dark mode

Theme Colors

Customize colors for light and dark modes separately using the light and dark theme properties:

<YakProvider
  theme={{
    position: "right",
    colorMode: "system",
    light: {
      background: "#ffffff",
      border: "#e5e5e5",
      messageBackground: "#dcfce7", // User message bubble color
      placeholderColor: "#a3a3a3", // Input placeholder text
      submitButtonColor: "#171717", // Submit button background
      submitButtonTextColor: "#ffffff", // Submit button icon
      headerIconColor: "#737373", // Header icons
      button: {
        background: "#171717",
        color: "#ffffff",
        border: "#171717",
      },
    },
    dark: {
      background: "#0a0a0a",
      border: "#262626",
      messageBackground: "#166534",
      placeholderColor: "#737373",
      submitButtonColor: "#fafafa",
      submitButtonTextColor: "#171717",
      headerIconColor: "#a3a3a3",
      button: {
        background: "#fafafa",
        color: "#171717",
        border: "#fafafa",
      },
    },
  }}
  {...props}
>
  <YakWidget />
</YakProvider>

ThemeColors Properties

Property	Type	Description
`background`	`string`	Main background color of the chat panel
`border`	`string`	Border color for the chat panel and elements
`messageBackground`	`string`	User message bubble background color
`placeholderColor`	`string`	Input placeholder text color
`submitButtonColor`	`string`	Submit button background color
`submitButtonTextColor`	`string`	Submit button text/icon color
`headerIconColor`	`string`	Header icon color (restart and close buttons)
`button`	`ButtonColors`	Trigger button customization

ButtonColors Properties

Property	Type	Description
`background`	`string`	Button background color
`color`	`string`	Button text/icon color
`border`	`string`	Button border color

Display Mode

The widget supports two display modes:

Chatbox (Default)

A floating panel that appears in the corner of the screen:

<YakProvider
  theme={{
    displayMode: "chatbox",
    position: "right"
  }}
  {...props}
>
  <YakWidget />
</YakProvider>

Drawer

A full-height side panel that slides in from the edge of the screen with a backdrop overlay:

<YakProvider
  theme={{
    displayMode: "drawer",
    position: "right" // Drawer appears on right side
  }}
  {...props}
>
  <YakWidget />
</YakProvider>

The position prop controls which side the drawer appears on:

"right" → Drawer slides in from the right edge
"left" → Drawer slides in from the left edge

Customizing Drawer Width

The default drawer width is 420px. To customize the width, you can override it with CSS:

/* Custom drawer width */
.yak-widget-container.yak-widget-drawer {
  width: 500px !important;
}

/* Responsive drawer width */
@media (min-width: 768px) {
  .yak-widget-container.yak-widget-drawer {
    width: 600px !important;
  }
}

The drawer automatically becomes full-width on mobile screens (below 640px).

Trigger Button

Customize the trigger button label:

<YakWidget triggerLabel="Chat with AI" />

Or add custom CSS:

<YakWidget iframeClassName="custom-iframe-class" />

CSS Variables

The chat interface uses CSS variables for styling. If you self-host the chat UI or have control over the iframe's CSS, override these variables:

Colors

Variable	Description	Default
`--yak-primary-color`	Primary brand color	`#171717`
`--yak-background`	Background color	`#ffffff`
`--yak-surface`	Surface/secondary background	`#fafafa`
`--yak-border`	Border color	`#e5e5e5`
`--yak-text-primary`	Primary text color	`#171717`
`--yak-text-secondary`	Secondary text color	`#737373`
`--yak-text-muted`	Muted text color (placeholder)	`#a3a3a3`
`--yak-primary-text-contrast`	Text on primary background	`#ffffff`
`--yak-header-icon-color`	Header icon color	`var(--yak-text-secondary)`

Message Bubbles

Variable	Description	Default
`--yak-user-bubble-bg`	User message background	`var(--yak-primary-color)`
`--yak-user-bubble-text`	User message text	`var(--yak-primary-text-contrast)`
`--yak-assistant-bubble-bg`	Assistant message background	`var(--yak-surface)`
`--yak-assistant-bubble-text`	Assistant message text	`var(--yak-text-primary)`

Spacing & Radius

Variable	Description	Default
`--yak-radius-sm`	Small border radius	`0.375rem`
`--yak-radius-md`	Medium border radius	`0.5rem`
`--yak-radius-lg`	Large border radius	`0.75rem`
`--yak-radius-full`	Full border radius	`9999px`

Typography

Variable	Description	Default
`--yak-font-family`	Font family	System fonts
`--yak-font-size-base`	Base font size	`1rem`

Dark Mode

By default, the widget automatically supports dark mode based on system preference (prefers-color-scheme). You can override this behavior using the colorMode theme option:

// Force light mode regardless of system preference
<YakProvider theme={{ colorMode: "light" }} {...props}>
  <YakWidget />
</YakProvider>

// Force dark mode regardless of system preference
<YakProvider theme={{ colorMode: "dark" }} {...props}>
  <YakWidget />
</YakProvider>

// Follow system preference (default)
<YakProvider theme={{ colorMode: "system" }} {...props}>
  <YakWidget />
</YakProvider>

Customizing Dark Mode Variables

If you self-host the chat UI, you can customize dark mode variables:

@media (prefers-color-scheme: dark) {
  :root {
    --yak-primary-color: #fafafa;
    --yak-background: #0a0a0a;
    --yak-surface: #171717;
    --yak-border: #262626;
    --yak-text-primary: #fafafa;
    --yak-text-secondary: #a3a3a3;
  }
}

Custom Trigger

Replace the default trigger with your own button:

import { useYak, YakProvider } from "@yak-io/react";

function CustomTrigger() {
  const { openWidget, isWidgetOpen } = useYak();

  if (isWidgetOpen) return null;

  return (
    <button
      onClick={() => openWidget()}
      className="fixed bottom-4 right-4 bg-blue-500 text-white rounded-full p-4 shadow-lg"
    >
      💬 Chat with AI
    </button>
  );
}

function App() {
  return (
    <YakProvider {...props}>
      {/* Don't render YakWidget if using custom trigger */}
      <CustomTrigger />
      {/* Your app */}
    </YakProvider>
  );
}