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