<Notifications />

Display and customize the list of notifications in your application

The Notifications component is used to display the list of notifications.

Basic Usage

Display notifications as a list without the Bell and Popover:

import { Inbox, Notifications } from '@novu/react';
 
function Novu() {
  return (
    <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
      <Notifications />
    </Inbox>
  );
}

Custom Notification Item

You can customize how each notification is rendered using the renderNotification prop:

import { Inbox, Notifications } from '@novu/react';
 
function Novu() {
  return (
    <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
      <Notifications
        renderNotification={(notification) => (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
            <p>{notification.data.text}</p>
          </div>
        )}
      />
    </Inbox>
  );
}

The renderNotification prop gives you full control over how each notification is displayed, allowing you to customize the layout, styling, and what notification data to show.

<Notifications />

Basic Usage

Custom Notification Item

On this page