Notifications – Styling and customization

Styling Notifications default components is enabled through a range of means, such as CSS variables, class names, and more.

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-notification {  /* Customise notification */}
.lb-avatar[data-loading] {  /* Customise avatar loading state */}