Overview

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.

Component Composition

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.

Defualt Bell

import { Inbox } from '@novu/react';

function Novu() {
  return (
    <Inbox subscriberId="1" applicationIdentifier="1" />
  );
}

Side menu Inbox

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>
  );
}

Inbox with a custom popover

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>
  );
}