@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
applicationIdentifier?
string
-
subscriber?
string | Subscriber
-
subscriberId?
string
-
routerPush?
RouterPush
-
defaultSchedule?
DefaultSchedule
-
preferencesSort?
PreferencesSort
-
preferenceGroups?
PreferenceGroups
-
preferencesFilter?
PreferencesFilter
-
tabs?
Tab[]
-
localization?
Localization
-
appearance?
ReactAppearance
-
socketUrl?
string
-
backendUrl?
string
-
subscriberHash?
string
-

Usage

import { Inbox } from "@novu/react";
 
function NotificationCenter() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APP_ID"
      subscriber="USER_ID"
      apiUrl="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[]
-
icons?
IconOverrides
-
animations?
boolean
-
variables?
Variables
-

Variables

PropTypeDefault
colorSeverityLow?
string
-
colorSeverityMedium?
string
-
colorSeverityHigh?
string
-
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
notificationSnoozedUntil__icon?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationDeliveredAt__icon?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationDeliveredAt__badge?
ElementStyles | ((context: { notification: Notification; }) => string)
-
dayScheduleCopyFooterContainer?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
dayScheduleCopyDay?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
dayScheduleCopySelectAll?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
dayScheduleCopyIcon?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
dayScheduleCopyTitle?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleInfo?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleInfoIcon?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleInfoContainer?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleBodyColumn?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleBodyRow?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleTableBody?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleHeaderColumn?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleTableHeader?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleTable?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleDescription?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleBody?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleActionsContainerRight?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleActionsContainer?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleLabel?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleLabelInfoIcon?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleLabelScheduleIcon?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleLabelContainer?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleHeader?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
scheduleContainer?
ElementStyles | ((context: { schedule?: Schedule | undefined; }) => string)
-
channelSwitchContainer?
ElementStyles | ((context: { preference?: Preference | undefined; preferenceGroup?: { name: string; preferences: Preference[]; } | undefined; }) => string)
-
channelName?
ElementStyles | ((context: { preference: Preference; }) => string)
-
channelLabelContainer?
ElementStyles | ((context: { preference?: Preference | undefined; preferenceGroup?: { name: string; preferences: Preference[]; } | undefined; }) => string)
-
channelLabel?
ElementStyles | ((context: { preference?: Preference | undefined; preferenceGroup?: { name: string; preferences: Preference[]; } | undefined; }) => string)
-
channelsContainer?
ElementStyles | ((context: { preference: Preference; }) => string)
-
channel__icon?
ElementStyles | ((context: { preference?: Preference | undefined; preferenceGroup?: { name: string; preferences: Preference[]; } | undefined; }) => string)
-
channelIconContainer?
ElementStyles | ((context: { preference?: Preference | undefined; preferenceGroup?: { name: string; preferences: Preference[]; } | undefined; }) => string)
-
channelContainer?
ElementStyles | ((context: { preference?: Preference | undefined; preferenceGroup?: { name: string; preferences: Preference[]; } | undefined; }) => string)
-
preferencesGroupWorkflows?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupInfoIcon?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupInfo?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupChannels?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupBody?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupActionsContainerRight__icon?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupActionsContainer?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupLabel?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupLabelIcon?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupLabelContainer?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupHeader?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
preferencesGroupContainer?
ElementStyles | ((context: { preferenceGroup: { name: string; preferences: Preference[]; }; }) => string)
-
workflowArrow__icon?
ElementStyles | ((context: { preference: Preference; }) => string)
-
workflowContainerRight__icon?
ElementStyles | ((context: { preference: Preference; }) => string)
-
workflowLabelContainer?
ElementStyles | ((context: { preference: Preference; }) => string)
-
workflowLabelIcon?
ElementStyles | ((context: { preference: Preference; }) => string)
-
workflowLabelHeaderContainer?
ElementStyles | ((context: { preference: Preference; }) => string)
-
workflowLabelHeader?
ElementStyles | ((context: { preference: Preference; }) => string)
-
workflowLabel?
ElementStyles | ((context: { preference: Preference; }) => string)
-
workflowContainer?
ElementStyles | ((context: { preference: Preference; }) => string)
-
notificationSecondaryAction__button?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationPrimaryAction__button?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationCustomActions?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationDefaultActions?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationDate?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationImageLoadingFallback?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationImage?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationBody?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationSubject?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationDot?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationTextContainer?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationContent?
ElementStyles | ((context: { notification: Notification; }) => string)
-
severityLow__notificationBar?
ElementStyles | ((context: { notification: Notification; }) => string)
-
severityMedium__notificationBar?
ElementStyles | ((context: { notification: Notification; }) => string)
-
severityHigh__notificationBar?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationBar?
ElementStyles | ((context: { notification: Notification; }) => string)
-
severityLow__notification?
ElementStyles | ((context: { notification: Notification; }) => string)
-
severityMedium__notification?
ElementStyles | ((context: { notification: Notification; }) => string)
-
severityHigh__notification?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notification?
ElementStyles | ((context: { notification: Notification; }) => string)
-
notificationList?
ElementStyles | ((context: { notifications: Notification[]; }) => string)
-
notificationListContainer?
ElementStyles | ((context: { notifications: Notification[]; }) => string)
-
preferencesContainer?
ElementStyles | ((context: { preferences?: Preference[] | undefined; groups: { name: string; preferences: Preference[]; }[]; }) => string)
-
bellDot?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
severityGlowLow__bellSeverityGlow?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
severityGlowMedium__bellSeverityGlow?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
severityGlowHigh__bellSeverityGlow?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
bellSeverityGlow?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
severityLow__bellContainer?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
severityMedium__bellContainer?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
severityHigh__bellContainer?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
bellContainer?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
bellIcon?
ElementStyles | ((context: { unreadCount: { total: number; severity: Record<string, number>; }; }) => string)
-
strong?
ElementStyles
-
notificationSnoozeCustomTime_popoverContent?
ElementStyles
-
notificationSnooze__dropdownItem__icon?
ElementStyles
-
notificationSnooze__dropdownItem?
ElementStyles
-
notificationSnooze__dropdownContent?
ElementStyles
-
timeSelect__dropdownItemCheck__icon?
ElementStyles
-
timeSelect__dropdownItemLabelContainer?
ElementStyles
-
timeSelect__dropdownItemLabel?
ElementStyles
-
timeSelect__dropdownItem?
ElementStyles
-
timeSelect__dropdownContent?
ElementStyles
-
timeSelect__time?
ElementStyles
-
timeSelect__dropdownTrigger?
ElementStyles
-
dayScheduleCopy__dropdownContent?
ElementStyles
-
dayScheduleCopy__dropdownTrigger?
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
-
channelsContainerCollapsible?
ElementStyles
-
workflowDescription?
ElementStyles
-
workflowLabelDisabled__icon?
ElementStyles
-
workflowContainerDisabledNotice?
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
-
notificationDateActionsContainer?
ElementStyles
-
notificationBodyContainer?
ElementStyles
-
notificationBody__strong?
ElementStyles
-
notificationSubject__strong?
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
-
inbox__popoverContent?
ElementStyles
-
inbox__popoverTrigger?
ElementStyles
-
inboxContent?
ElementStyles
-
loading?
ElementStyles
-
inboxHeader?
ElementStyles
-
preferences__button?
ElementStyles
-
lockIcon?
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
renderCustomActions?
CustomActionsRenderer
-
renderDefaultActions?
DefaultActionsRenderer
-
renderBody?
BodyRenderer
-
renderSubject?
SubjectRenderer
-
renderAvatar?
AvatarRenderer
-
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
renderCustomActions?
CustomActionsRenderer
-
renderDefaultActions?
DefaultActionsRenderer
-
renderBody?
BodyRenderer
-
renderSubject?
SubjectRenderer
-
renderAvatar?
AvatarRenderer
-
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

Edit this page on GitHub