StylesheetProvider

App.jsx

import { StylesheetProvider } from '@botpress/webchat'

const config = {
  color: '#3778f0',
  fontFamily: 'Inter',
  radius: 1,
  variant: 'soft',
  themeMode: 'light',
  headerVariant: 'solid'
}

function App() {
  return (
      <StylesheetProvider
        color={config.color}
        fontFamily={config.fontFamily}
        radius={config.radius}
        variant={config.variant}
        themeMode={config.themeMode}
      />
  )
}

App.jsx

import { StylesheetProvider } from '@botpress/webchat'

const config = {
  color: '#3778f0',
  fontFamily: 'Inter',
  radius: 1,
  variant: 'soft',
  themeMode: 'light',
  headerVariant: 'solid'
}

function App() {
  return (
      <StylesheetProvider
        color={config.color}
        fontFamily={config.fontFamily}
        radius={config.radius}
        variant={config.variant}
        themeMode={config.themeMode}
      />
  )
}

The StylesheetProvider component dynamically generates and injects a custom Webchat theme based on your configuration. This includes styling variables like:

Colors
Border radius
Font family
Theme variant

The generated theme is automatically injected into the page using a <style> tag and supports both light and dark modes.

Props

string

Primary theme color in hex format.

number

Corner radius for UI elements. Can be 0.5 - 4

'light' | 'dark'

Light or dark mode theme.

'solid' | 'soft'

Visual style of the chat window.

'rubik' | 'inter' | 'ibm' | 'fira'

Font family used in Webchat.

'solid' | 'glass'

Style variant of the header.

Last modified on June 15, 2026

Composer

useWebchat

Get started

ADK

Studio

Integrations

Webchat

Botpress Desk

StylesheetProvider

Props

​Props

Props