Components | Novu Documentation

Composition

The Inbox is composed of the following sub-components that you can use to build your Inbox structure and layout:

Inbox

The Inbox wrapper, which is used to wrap the entire inbox UI and establish the session

Bell

Used to display the bell icon and trigger the popover component when clicked

Notifications

Displays the notifications list

Preferences

Used to display the preferences modal

InboxContent

Usage with a custom popover

The internal UI and styles for those components can be modified using the appearance prop.

Layouts

The composition of the indivudal components can generate multiple different popular inbox layouts.

Inbox with Bell (Default)

A trigger button usually located at the top right corner of the screen, which triggers the popover component when clicked.

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

To render a side menu inbox, use the <Notifications /> component as a direct child of the <Inbox /> component, you can hide or show it based on any custom logic.

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

Full page Inbox

Similiary to the side menu inbox, you can use the <Notifications /> component as a direct child of the <Inbox /> component, you can hide or show it based on any custom logic.

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

import { Bell, Inbox, InboxContent } from '@novu/react';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 
export default function CustomPopoverPage() {
  return (
    <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
      <Popover>
        <PopoverTrigger>
          <Bell />
        </PopoverTrigger>
        <PopoverContent className="h-[500px] w-[400px] overflow-auto p-0">
          <InboxContent />
        </PopoverContent>
      </Popover>
    </Inbox>
  );
}

Inbox components structure