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.

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