DocumentationNovu Documentation
PlatformGuidesFrameworkCommunityAPI Reference
Sign InSign Up

GitHubnovuhq/novu

37.2K

<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" subscriber="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" subscriber="YOUR_SUBSCRIBER_ID">
      <Notifications
        renderNotification={(notification) => (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</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.

On this page

Edit this page on GitHub