@novu/react

API reference for the @novu/react package

Components

The @novu/react package provides React components for building notification UIs.

Inbox

The main component for displaying notifications.

Props

PropTypeDefault
subscriber?
string | Subscriber
-
subscriberId?
string
-
routerPush?
RouterPush
-
preferencesFilter?
PreferencesFilter
-
tabs?
Tab[]
-
localization?
Localization
-
appearance?
Appearance
-
socketUrl?
string
-
backendUrl?
string
-
subscriberHash?
string
-
applicationIdentifier?
string
-

Usage

import { Inbox } from "@novu/react";
 
function NotificationCenter() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APP_ID"
      subscriber="USER_ID"
      backendUrl="https://api.novu.co"
      socketUrl="https://ws.novu.co"
      placement="right"
      placementOffset={10}
      onNotificationClick={(notification) => {
        // Handle notification click
        console.log(notification);
      }}
    />
  );
}

Appearance Configuration

PropTypeDefault
baseTheme?
Theme | Theme[]
-
animations?
boolean
-
variables?
Variables
-

Variables

PropTypeDefault
colorStripes?
string
-
borderRadius?
string
-
fontSize?
string
-
colorRing?
string
-
colorShadow?
string
-
colorNeutral?
string
-
colorCounterForeground?
string
-
colorCounter?
string
-
colorSecondaryForeground?
string
-
colorSecondary?
string
-
colorPrimaryForeground?
string
-
colorPrimary?
string
-
colorForeground?
string
-
colorBackground?
string
-

Elements

PropTypeDefault
strong?
ElementStyles
-
notificationSnoozedUntil__icon?
ElementStyles
-
notificationDeliveredAt__icon?
ElementStyles
-
notificationDeliveredAt__badge?
ElementStyles
-
notificationSnoozeCustomTime_popoverContent?
ElementStyles
-
notificationSnooze__dropdownItem__icon?
ElementStyles
-
notificationSnooze__dropdownItem?
ElementStyles
-
notificationSnooze__dropdownContent?
ElementStyles
-
preferencesList__skeletonText?
ElementStyles
-
preferencesList__skeletonSwitchThumb?
ElementStyles
-
preferencesList__skeletonSwitch?
ElementStyles
-
preferencesList__skeletonIcon?
ElementStyles
-
preferencesList__skeletonItem?
ElementStyles
-
preferencesList__skeletonContent?
ElementStyles
-
preferencesList__skeleton?
ElementStyles
-
preferencesListEmptyNotice?
ElementStyles
-
preferencesListEmptyNoticeContainer?
ElementStyles
-
preferencesHeader__icon?
ElementStyles
-
preferencesHeader__title?
ElementStyles
-
preferencesHeader__back__button__icon?
ElementStyles
-
preferencesHeader__back__button?
ElementStyles
-
preferencesHeader?
ElementStyles
-
channelSwitchThumb?
ElementStyles
-
channelSwitch?
ElementStyles
-
channelSwitchContainer?
ElementStyles
-
channelName?
ElementStyles
-
channelLabelContainer?
ElementStyles
-
channelLabel?
ElementStyles
-
channelsContainer?
ElementStyles
-
channelsContainerCollapsible?
ElementStyles
-
channel__icon?
ElementStyles
-
channelIconContainer?
ElementStyles
-
channelContainer?
ElementStyles
-
workflowDescription?
ElementStyles
-
workflowArrow__icon?
ElementStyles
-
workflowContainerRight__icon?
ElementStyles
-
workflowLabelDisabled__icon?
ElementStyles
-
workflowContainerDisabledNotice?
ElementStyles
-
workflowLabelContainer?
ElementStyles
-
workflowLabelHeader?
ElementStyles
-
workflowLabel?
ElementStyles
-
workflowContainer?
ElementStyles
-
moreTabs__dropdownItemRight__icon?
ElementStyles
-
moreTabs__dropdownItemLabel?
ElementStyles
-
moreTabs__dropdownItem?
ElementStyles
-
moreTabs__dropdownContent?
ElementStyles
-
moreTabs__dropdownTrigger?
ElementStyles
-
moreTabs__icon?
ElementStyles
-
moreTabs__button?
ElementStyles
-
moreActions__dots?
ElementStyles
-
moreActions__dropdownItemLeft__icon?
ElementStyles
-
moreActions__dropdownItemLabel?
ElementStyles
-
moreActions__dropdownItem?
ElementStyles
-
moreActions__dropdownContent?
ElementStyles
-
moreActions__dropdownTrigger?
ElementStyles
-
moreActionsContainer?
ElementStyles
-
inboxStatus__dropdownItemCheck__icon?
ElementStyles
-
inboxStatus__dropdownItem__icon?
ElementStyles
-
inboxStatus__dropdownItemRight__icon?
ElementStyles
-
inboxStatus__dropdownItemLeft__icon?
ElementStyles
-
inboxStatus__dropdownItemLabelContainer?
ElementStyles
-
inboxStatus__dropdownItemLabel?
ElementStyles
-
inboxStatus__dropdownItem?
ElementStyles
-
inboxStatus__dropdownContent?
ElementStyles
-
inboxStatus__dropdownTrigger?
ElementStyles
-
inboxStatus__title?
ElementStyles
-
notificationsTabsTriggerCount?
ElementStyles
-
notificationsTabsTriggerLabel?
ElementStyles
-
notificationsTabs__tabsTrigger?
ElementStyles
-
notificationsTabs__tabsContent?
ElementStyles
-
notificationsTabs__tabsList?
ElementStyles
-
notificationsTabs__tabsRoot?
ElementStyles
-
notificationUnsnooze__icon?
ElementStyles
-
notificationSnooze__icon?
ElementStyles
-
notificationUnarchive__icon?
ElementStyles
-
notificationArchive__icon?
ElementStyles
-
notificationUnread__icon?
ElementStyles
-
notificationRead__icon?
ElementStyles
-
notificationUnsnooze__button?
ElementStyles
-
notificationSnooze__button?
ElementStyles
-
notificationUnarchive__button?
ElementStyles
-
notificationArchive__button?
ElementStyles
-
notificationUnread__button?
ElementStyles
-
notificationRead__button?
ElementStyles
-
notificationSecondaryAction__button?
ElementStyles
-
notificationPrimaryAction__button?
ElementStyles
-
notificationCustomActions?
ElementStyles
-
notificationDefaultActions?
ElementStyles
-
notificationDateActionsContainer?
ElementStyles
-
notificationDate?
ElementStyles
-
notificationImageLoadingFallback?
ElementStyles
-
notificationImage?
ElementStyles
-
notificationBodyContainer?
ElementStyles
-
notificationBody__strong?
ElementStyles
-
notificationBody?
ElementStyles
-
notificationSubject__strong?
ElementStyles
-
notificationSubject?
ElementStyles
-
notificationDot?
ElementStyles
-
notificationTextContainer?
ElementStyles
-
notificationContent?
ElementStyles
-
notification?
ElementStyles
-
notificationListNewNotificationsNotice__button?
ElementStyles
-
notificationList__skeletonText?
ElementStyles
-
notificationList__skeletonAvatar?
ElementStyles
-
notificationList__skeletonItem?
ElementStyles
-
notificationList__skeletonContent?
ElementStyles
-
notificationList__skeleton?
ElementStyles
-
notificationListEmptyNotice?
ElementStyles
-
notificationListEmptyNoticeIcon?
ElementStyles
-
notificationListEmptyNoticeOverlay?
ElementStyles
-
notificationListEmptyNoticeContainer?
ElementStyles
-
notificationList?
ElementStyles
-
notificationListContainer?
ElementStyles
-
inbox__popoverContent?
ElementStyles
-
inbox__popoverTrigger?
ElementStyles
-
inboxContent?
ElementStyles
-
loading?
ElementStyles
-
inboxHeader?
ElementStyles
-
preferencesContainer?
ElementStyles
-
preferences__button?
ElementStyles
-
bellDot?
ElementStyles
-
bellContainer?
ElementStyles
-
bellIcon?
ElementStyles
-
root?
ElementStyles
-
dots?
ElementStyles
-
tabsTrigger?
ElementStyles
-
tabsContent?
ElementStyles
-
tabsList?
ElementStyles
-
tabsRoot?
ElementStyles
-
skeletonSwitchThumb?
ElementStyles
-
skeletonSwitch?
ElementStyles
-
skeletonAvatar?
ElementStyles
-
skeletonText?
ElementStyles
-
back__button?
ElementStyles
-
snoozeDatePicker__timePickerLabel?
ElementStyles
-
snoozeDatePicker__timePickerContainer?
ElementStyles
-
snoozeDatePickerApply__button?
ElementStyles
-
snoozeDatePickerCancel__button?
ElementStyles
-
snoozeDatePicker__actions?
ElementStyles
-
snoozeDatePicker?
ElementStyles
-
timePickerMinute__input?
ElementStyles
-
timePickerHour__input?
ElementStyles
-
timePicker__separator?
ElementStyles
-
timePicker__periodSelect?
ElementStyles
-
timePicker__minuteSelect?
ElementStyles
-
timePicker__hourSelect?
ElementStyles
-
timePicker?
ElementStyles
-
datePickerCalendarDay__button?
ElementStyles
-
datePickerHeaderMonth?
ElementStyles
-
datePickerCalendar?
ElementStyles
-
datePickerControlNextTrigger__icon?
ElementStyles
-
datePickerControlPrevTrigger__icon?
ElementStyles
-
datePickerControlNextTrigger?
ElementStyles
-
datePickerControlPrevTrigger?
ElementStyles
-
datePickerControl?
ElementStyles
-
datePickerGridHeader?
ElementStyles
-
datePickerTrigger?
ElementStyles
-
datePickerGridCellTrigger?
ElementStyles
-
datePickerGridCell?
ElementStyles
-
datePickerGridRow?
ElementStyles
-
datePickerGrid?
ElementStyles
-
datePicker?
ElementStyles
-
tooltipTrigger?
ElementStyles
-
tooltipContent?
ElementStyles
-
collapsible?
ElementStyles
-
dropdownItem__icon?
ElementStyles
-
dropdownItemRight__icon?
ElementStyles
-
dropdownItemLeft__icon?
ElementStyles
-
dropdownItemLabelContainer?
ElementStyles
-
dropdownItemLabel?
ElementStyles
-
dropdownItem?
ElementStyles
-
dropdownTrigger?
ElementStyles
-
dropdownContent?
ElementStyles
-
popoverClose?
ElementStyles
-
popoverTrigger?
ElementStyles
-
popoverContent?
ElementStyles
-
badge?
ElementStyles
-
icon?
ElementStyles
-
input?
ElementStyles
-
button?
ElementStyles
-

Bell

A customizable notification bell component.

Props

PropTypeDefault
renderBell?
BellRenderer
-

Usage

import { Bell } from "@novu/react";
import { BellIcon } from "lucide-react";
 
function NotificationBell() {
  return (
    <Bell
      renderBell={(unreadCount) => (
        <div className="relative">
          <BellIcon className="h-6 w-6" />
          {unreadCount > 0 && (
            <span className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center">
              {unreadCount}
            </span>
          )}
        </div>
      )}
    />
  );
}

Notifications

A component for rendering a list of notifications.

Props

PropTypeDefault
renderBody?
BodyRenderer
-
renderSubject?
SubjectRenderer
-
renderNotification?
NotificationsRenderer
-
onSecondaryActionClick?
NotificationActionClickHandler
-
onPrimaryActionClick?
NotificationActionClickHandler
-
onNotificationClick?
NotificationClickHandler
-

Usage

import { Notifications } from "@novu/react";
 
function NotificationList() {
  return (
    <Notifications
      onNotificationClick={(notification) => {
        // Handle notification click
        console.log(notification);
      }}
      renderNotification={({ body, createdAt }) => (
        <div className="flex gap-2 p-2">
          <div className="flex-1">
            <p>{body}</p>
            <time className="text-sm text-gray-500">
              {new Date(createdAt).toLocaleDateString()}
            </time>
          </div>
        </div>
      )}
    />
  );
}

InboxContent

A component for building custom notification inboxes.

Props

PropTypeDefault
renderBody?
BodyRenderer
-
renderSubject?
SubjectRenderer
-
renderNotification?
NotificationsRenderer
-
hideNav?
boolean
-
initialPage?
InboxPage
-
onSecondaryActionClick?
NotificationActionClickHandler
-
onPrimaryActionClick?
NotificationActionClickHandler
-
onNotificationClick?
NotificationClickHandler
-

Usage

import { InboxContent } from "@novu/react";
 
function CustomInbox() {
  return (
    <div className="custom-inbox-wrapper">
      <InboxContent
        onNotificationClick={(notification) => {
          // Handle notification click
          console.log(notification);
        }}
        onPrimaryActionClick={(notification) => {
          // Handle primary action click
          console.log(notification);
        }}
        hideNav={false}
        renderNotification={({ body, createdAt }) => (
          <div className="notification-item">
            <p>{body}</p>
            <time>{new Date(createdAt).toLocaleDateString()}</time>
          </div>
        )}
      />
    </div>
  );
}

On this page