Theming

The widget ships unopinionated styles you control with CSS. There are three levels, from a few variables to a fully custom shell.

Import the styles

import "@firstflow/runtime/styles.css";

Without this import the widget renders unstyled. Import it once, near your app root.

1. Re-theme with CSS variables

Override the --ff-* custom properties on :root (or any ancestor of the widget):

:root {
  --ff-bg: #fef3c7;
  --ff-accent: #6366f1;
  --ff-radius-shell: 16px;
  --ff-widget-max-width: 420px;
  /* ~12 tokens total see packages/sdk-frontend/styles/default.css */
}

Dark mode toggles with a data attribute:

<html data-theme="dark">

2. Override class hooks

Every part of the widget has a stable class name. Target them in your own CSS for finer control: ff-widget, ff-widget__header, ff-block, ff-block__title, ff-block__body, ff-cta, ff-quick-reply, ff-option, ff-scale__dot, and more.

.ff-cta { text-transform: uppercase; letter-spacing: 0.04em; }
.ff-quick-reply { border-radius: 999px; }

3. Build your own shell

For complete control over markup, skip FirstflowWidget and render BlockRenderer inside your own component, driven by useFirstflow:

import { useFirstflow, findNode, BlockRenderer } from "@firstflow/runtime";

function MyWidget() {
  const { active, dismiss } = useFirstflow();
  if (!active) return null;
  const node = findNode(active.experience.flow, active.currentNodeId);
  if (!node) return null;
  return (
    <MyPanel onClose={dismiss}>
      <BlockRenderer node={node} />
    </MyPanel>
  );
}

The runtime state, triggers, navigation, and persistence keep working you only replace the shell. See Blocks & custom shells.

Browser SDK

Server SDK

Advanced

Import the styles

1. Re-theme with CSS variables

2. Override class hooks

3. Build your own shell

​Import the styles

​1. Re-theme with CSS variables

​2. Override class hooks

​3. Build your own shell

Import the styles

1. Re-theme with CSS variables

2. Override class hooks

3. Build your own shell