Notifications - Default components

The default components included in Notifications are a great way to start building your application. With these components you can render inbox notification components.

Fully styled notification components, with an optional dark mode.
Customize through CSS variables and class names.
Receive notifications automatically triggered by Liveblocks Comments.
Receive fully custom notifications.

InboxNotification

The InboxNotification component renders a single inbox notification.

Usage

The best way to get started is to import the useInboxNotifications hook, and loop through each of the current user’s notifications.

import { InboxNotification } from "@liveblocks/react-ui";import { useInboxNotifications } from "../liveblocks.config";
function Component() {  const { inboxNotifications } = useInboxNotifications();
  return (    <>      {inboxNotifications.map((inboxNotification) => (        <InboxNotification          key={inboxNotification.id}          inboxNotification={inboxNotification}        />      ))}    </>  );}

Room titles displayed in notifications are obtained using the resolveRoomsInfo function in LiveblocksProvider. This allows you to display meaningful document or room names instead of room IDs in your notifications. Learn more in our guide on how to customize room names in inbox notifications.

Rendering different components

As well as displaying the default notification component, you can render alternate components for different notification kinds (the type of notification). Below we’re rendering a different component for custom $fileUploaded notifications.

import { InboxNotification } from "@liveblocks/react-ui";import { useInboxNotifications } from "../liveblocks.config";
function Component() {  const { inboxNotifications } = useInboxNotifications();
  return (    <>      {inboxNotifications.map((inboxNotification) => (        <InboxNotification          key={inboxNotification.id}          inboxNotification={inboxNotification}          kinds={{            $fileUploaded: (props) => (              <InboxNotification.Custom {...props} title="New file" aside="📁">                A new file has been uploaded              </InboxNotification.Custom>            ),          }}        />      ))}    </>  );}

You can also render any plain JSX you like. Learn more about this under rendering notification kinds differently.

InboxNotificationList

The InboxNotificationList component renders your inbox notifications as a list.

Usage

Wrap your InboxNotification components in InboxNotificationList to render your notifications as an ordered HTML list, ol > li.

import { InboxNotification, InboxNotificationList } from "@liveblocks/react-ui";import { useInboxNotifications } from "../liveblocks.config";
function Component() {  const { inboxNotifications } = useInboxNotifications();
  return (    <InboxNotificationList>      {inboxNotifications.map((inboxNotification) => (        <InboxNotification          key={inboxNotification.id}          inboxNotification={inboxNotification}        />      ))}    </InboxNotificationList>  );}

Customization

It’s possible to style and localize the default components:

Import dark mode styles.
Modify the style with CSS variables and class names.
Use overrides to change default text used in the components.

Learn more under styling and customization.

Notifications - Default components

InboxNotification

Usage

Room titles

Rendering different components

InboxNotificationList

Usage

Customization

AI assistant