Styling

Set the theme in the dashboard

Most styling lives in the dashboard under Widget: your colors or Match your site, light or dark, and corners. Changes apply without a deploy. See Widget and theme.

Override it in code

<FrankieProvider
  publishableKey="pk_live_…"
  theme={{ primary: "#4f46e5", radius: "1", mode: "dark" }}
>

Field	What it sets
primary, primaryForeground	Buttons, links and the launcher, and the text on them
background, foreground	The chat's surface and text
muted, border	Secondary surfaces and hairlines
warning	The accent of an action waiting for approval: its border, tint and shield (--frankie-warning). Defaults to amber, #d97706 light and #f59e0b dark.
radius	Corner radius in rem, for example "0.75"
fontFamily	The chat's font
mode	"light", "dark" or "system" (follows your app's own dark/light class or data-theme on <html>/<body>, else the OS)

Scoped styles

Everything is scoped under .frankie-root and driven by CSS variables, and the stylesheet ships without a CSS reset, so it can't restyle your page.

import "@frankieai/react/styles.css";

With Tailwind v4

If you already run Tailwind v4, skip the stylesheet and let the widget compile against your own design tokens:

@source "../node_modules/@frankieai/react/dist";

Then pass injectStyles={false} to the provider.