Comments - Styling and customization

Styling default components and primitives 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-thread {  /* Customise thread */}
.lb-avatar[data-loading] {  /* Customise avatar loading state */}

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 switching the word Anonymous to Anonyme for French users.

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

You can also override strings on a component basis, for example if you’d like to change the placeholder text in the Composer.

import { Composer } from "@liveblocks/react-ui";
function Component() {  return (    <Composer      overrides={{        COMPOSER_PLACEHOLDER: "Reply to thread…",      }}    />  );}

Primitives

Primitives can be styled like any other element in your React application—each component passes down props to its root element, meaning you can use regular HTML props.

import { Composer } from "@liveblocks/react-ui/primitives";
function Component() {  return (    <Composer.Submit className="btn-primary" style={{ color: "#ffffff" }}>      Reply    </Composer.Submit>  );}

You can use your custom design system components with primitives by using the asChild property, which will merge the primitive’s props into your component’s.

import { Composer } from "@liveblocks/react-ui/primitives";import { Button } from "@/my-design-system";
function Component() {  return (    <Composer.Submit asChild>      <Button variant="primary">Reply</Button>    </Composer.Submit>  );}

Tailwind

Style primitives with Tailwind by adding class names.

import { Composer } from "@liveblocks/react-ui/primitives";
function Component() {  return (    <Composer.Submit className="bg-black text-white">Reply</Composer.Submit>  );}

CSS modules

Style primitives with CSS modules as you would any other component.

import { Composer } from "@liveblocks/react-ui";import styles from "./Component.module.css";
function Component() {  return <Composer.Submit className={styles.submit}>Reply</Composer.Submit>;}