Skip to main content
Install the UI package alongside FrogBot and React:
Next.js applications also need next and @frogbotai/next. Vite applications do not. Import the compiled stylesheet once in your application root. Consumers do not need Tailwind or a content-source configuration.
The FrogBot admin panel already loads this stylesheet through @frogbotai/next/css, so you only import it for pages outside the admin. FrogBot components look the same outside the admin as inside it: the stylesheet brings its own reset, scoped to FrogBot elements, so your page’s other markup is left alone. To get the admin’s fonts (Inter, and Roboto Mono for code), import the bundled font files too, or pick your own font:

​
Cascade layer

FrogBot puts all of its styles in a CSS cascade layer named frogbot, and its reset in frogbot-reset, the first layer on the page. Your own CSS that isn’t in a layer always beats FrogBot, whatever the selector, so you can restyle components with plain class rules and no !important. See how to override FrogBot styles.

​
Use with Tailwind CSS

With Tailwind CSS v4, utilities such as text-red-600 or underline on a FrogBot component beat the component’s own style. The frogbot layer has to sit between Tailwind’s components and utilities layers, and a layer takes its place the first time the page names it. Use one of these setups:
  • Import FrogBot’s stylesheet before your Tailwind CSS. It declares the order for you.
  • Or put the layer order above the Tailwind import in your own CSS, then import FrogBot in any order.
If Tailwind loads first without that line, frogbot lands after utilities and utilities on FrogBot components have no effect. With either setup, FrogBot’s component styles beat Tailwind’s Preflight reset. Tailwind CSS v3 output isn’t in a layer, so it always beats FrogBot, Preflight included. For Tailwind in the admin panel, see admin panel styles.

​
Browser support

FrogBot UI needs Chrome or Edge 123, Firefox 120, or Safari 17.5 or later. Older browsers show FrogBot components without their colors. The package supports React 19 and can be bundled by Next.js or Vite. Its internal UI dependencies are installed with the package; applications do not install or import them directly. It does not require environment-variable shims or platform SDKs.
Internal utility class names are not public API. Do not target them from application CSS. Use theme tokens, component props, and documented data attributes instead.