Customize Notification Item

Learn how to use render props to change the look of notifications with the Inbox component, customize subjects and bodies, and apply conditional display logic.

Novu provides render props that can be used to customize specific parts of the default notfication item seen in the Inbox UI such as subject, body, and the whole notfication.

Each render prop receives the full notification object, giving you access to all the data needed to build a fully custom UI.

Customize the notification subject

Use the renderSubject prop to provide a custom component for the notification's subject line while keeping the rest of the notification style intact.

Customize notfication subject

import { Inbox } from '@novu/react';
 
function NovuInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderSubject={(notification) => (
        <strong>{notification.subject.toUpperCase()}</strong>
      )}
    />
  );
}
 
export default NovuInbox;

Customize the notification body

Use renderBody if you want to keep the default Inbox UI and only change how the body is rendered. This is useful when you want to customize content formatting or include additional fields from the data object.

Customize notfication subject

import { Inbox } from '@novu/react';
 
function NovuInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderBody={(notification) => (
        <div>
          <p>🔔 New alert: {notification.body}</p>
        </div>
      )}
    />
  );
}
 
export default NovuInbox;

Customize the entire notification item

Use the renderNotification prop to customize the entire notification item in the Inbox UI, including the container, layout, and the content of the subject and body of each notification.

While renderNotification gives you full control over the notification UI, it is not recommended for most use cases. Using it means you will have to re-create the Inbox component built-in actions like mark as unread, archive snooze, and other interaction tooltips yourself.

Customize notfication

import { Inbox } from '@novu/react';
 
function NovuInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => (
        <div style={{ padding: '10px', border: '1px solid #ccc', marginBottom: '10px' }}>
          <h3>{notification.subject}</h3>
          <p>{notification.body}</p>
        </div>
      )}
    />
  );
}
 
export default NovuInbox;

Customize the notification subject

Customize the notification body

Customize the entire notification item

On this page