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