AI Copilots - Styling and customization

Styling default components is enabled through a range of means, such as CSS variables, class names, and more. It’s also possible to use overrides to modify any strings used in the default components, which is especially helpful for localization.

Default components

To add the default components’ theme, import the default styles CSS file.

import "@liveblocks/react-ui/styles.css";

You can also import one of two CSS files to enable dark mode, depending on how you’d like to enable it.

// Dark mode using the system theme with `prefers-color-scheme`import "@liveblocks/react-ui/styles/dark/media-query.css";

// Dark mode using `className="dark"`, `data-theme="dark"`, or `data-dark="true"`import "@liveblocks/react-ui/styles/dark/attributes.css";

CSS variables

A number of CSS variables can be used to customize colors, spacing, and more. This is our recommended path for styling the default components, as you can quickly and easily modify all components with just a few variables.

/* Styles all default components */.lb-root {  --lb-accent: purple;  --lb-spacing: 1em;  --lb-radius: 0;}

Class names

Should you need deeper customization, class names can be styled, some of which provide contextual data attributes.

.lb-ai-chat {  /* Customize AI chat */}
.lb-ai-composer {  /* Customize message composer */}

Overrides and localization

It’s possible to override strings used in the default components, which has a couple of different uses, the first being localization. In this example, we’re globally setting the AI composer’s placeholder from “Ask anything…” to “Posez une question” for French users.

import { LiveblocksUiConfig } from "@liveblocks/react-ui";
export function App() {  return (    <LiveblocksUiConfig      overrides={{        locale: "fr",        AI_COMPOSER_PLACEHOLDER: "Posez une question",      }}    >      {/* ... */}    </LiveblocksUiConfig>  );}

You can also override strings on a component basis, for example if you’d like to change the “Send” button tooltip to “Post message” in the chat’s message composer.

import { Composer } from "@liveblocks/react-ui";
function Component() {  return (    <AiChat      chatId="my-chat-id"      copilotId="co_a7Gd3x..."      overrides={{        AI_COMPOSER_PLACEHOLDER: "Post message",      }}    />  );}