---
meta:
  title: "Styling and customization"
  parentTitle: "Comments"
  description: "CSS variables, dark mode, localization, and more"
---

Styling
[default components](/docs/ready-made-features/comments/default-components) and
[primitives](/docs/ready-made-features/comments/primitives) is enabled through a
range of means, such as CSS variables, class names, and more. It’s also possible
to use
[overrides](/docs/ready-made-features/comments/styling-and-customization#Overrides-and-localization)
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](/docs/api-reference/liveblocks-react-ui#Default-styles) CSS
file.

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

You can also import one of two CSS files to enable
[dark mode](/docs/api-reference/liveblocks-react-ui#Dark-mode), depending on how
you’d like to enable it.

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

```ts
// 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](/docs/api-reference/liveblocks-react-ui#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.

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

### Class names

Should you need deeper customization,
[class names](/docs/api-reference/liveblocks-react-ui#Class-names) can be
styled, some of which provide contextual data attributes.

```css
.lb-thread {
  /* Customize thread */
}

.lb-avatar[data-loading] {
  /* Customize avatar loading state */
}
```

### Overrides and localization

It’s possible to
[override strings](/docs/api-reference/liveblocks-react-ui#Overrides) 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.

```tsx
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`](/docs/api-reference/liveblocks-react-ui#Composer).

```tsx
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](/docs/ready-made-features/comments/primitives#Use-regular-props)
in your React application—each component passes down props to its root element,
meaning you can use regular HTML props.

```tsx
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](/docs/ready-made-features/comments/primitives#Merge-with-your-design-system-components)
into your component’s.

```tsx highlight="6"
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](https://tailwindcss.com) by adding class names.

```tsx
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](https://github.com/css-modules/css-modules)
as you would any other component.

```tsx
import { Composer } from "@liveblocks/react-ui";
import styles from "./Component.module.css";

function Component() {
  return <Composer.Submit className={styles.submit}>Reply</Composer.Submit>;
}
```

---

For an overview of all available documentation, see [/llms.txt](/llms.txt).