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.
Room titles
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.
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
.
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.