Theming

Findable components use CSS custom properties for easy theming. Import the default stylesheet and override variables to match your brand.

Theming Playground

Presets

#0972eb
#0860c7
#ffffff
#f4f5f7
#021f45
#021f45
#6b7280
#dee2e6
16px
500px

Themed Chat

Ask a question to get started

Generated CSS

/* Using default theme */

Import Styles

import '@findable-ai/react/styles.css';

Available Variables

Default valuescss
.findable-root {
  /* Colours */
  --findable-color-primary: #0972eb;
  --findable-color-primary-hover: #0860c7;
  --findable-color-bg: #ffffff;
  --findable-color-bg-secondary: #f4f5f7;
  --findable-color-bg-user: #021f45;
  --findable-color-text: #021f45;
  --findable-color-text-secondary: #6b7280;
  --findable-color-text-inverse: #ffffff;
  --findable-color-border: #dee2e6;
  --findable-color-error: #dc3545;

  /* Typography */
  --findable-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --findable-font-size-sm: 0.8125rem;
  --findable-font-size-base: 0.875rem;
  --findable-font-size-lg: 1rem;

  /* Spacing */
  --findable-space-xs: 4px;
  --findable-space-sm: 8px;
  --findable-space-md: 12px;
  --findable-space-lg: 16px;
  --findable-space-xl: 24px;

  /* Radii */
  --findable-radius-sm: 8px;
  --findable-radius-md: 16px;
  --findable-radius-lg: 20px;
  --findable-radius-full: 9999px;

  /* Layout */
  --findable-chat-height: 600px;
  --findable-chat-max-width: 640px;
}

Overriding Variables

Add your overrides in your own CSS file, loaded after the Findable stylesheet:

your-theme.csscss
.findable-root {
  --findable-color-primary: #e63946;
  --findable-color-bg-user: #1d3557;
  --findable-font-family: 'Inter', sans-serif;
  --findable-radius-md: 8px;
  --findable-chat-height: 500px;
}

CSS Class Structure

All classes follow BEM naming under the .findable-root scope:

.findable-root            — Root scope (set on every widget)
.findable-chat            — Chat widget container
.findable-chat__header    — Chat header bar
.findable-chat__messages  — Scrollable message area
.findable-chat__message   — Individual message wrapper
.findable-chat__message--user       — User message
.findable-chat__message--assistant  — Assistant message
.findable-chat__message-bubble      — Message bubble
.findable-chat__input-form          — Input form
.findable-chat__textarea            — Text input
.findable-chat__send-button         — Send button
.findable-chat__citation-badge      — Citation reference
.findable-chat__follow-ups          — Follow-up suggestions
.findable-chat__follow-up-chip      — Individual suggestion

.findable-search              — Search widget container
.findable-search__input       — Search text input
.findable-search__hit         — Individual result row
.findable-search__hit-title   — Result title
.findable-search__hit-meta    — Result metadata
.findable-search__load-more   — Load more button

Dark Mode

Override the colour variables under a dark mode selector:

@media (prefers-color-scheme: dark) {
  .findable-root {
    --findable-color-bg: #1a1a2e;
    --findable-color-bg-secondary: #16213e;
    --findable-color-bg-user: #0f3460;
    --findable-color-text: #e2e8f0;
    --findable-color-text-secondary: #94a3b8;
    --findable-color-text-inverse: #ffffff;
    --findable-color-border: #334155;
  }
}