Customize Popover

The Inbox component provides a built-in popover triggered by its bell icon. In situations where you want more control over how and where notifications appear, you can display the notification feed directly or mount it inside your own custom popover, modal, or panel.

Display the standalone notification feed

You can render the notification feed directly into any part of your application, such as a dashboard panel or a dedicated notifications page. This is useful for situations where you don't need a popover trigger at all. Novu provides two components for this.

Both components support the same customization props as the Inbox component, except for configuration options (like applicationIdentifier, subscriber, and renderBell).

Notifications component

The Notifications component renders the core notification experience, which includes the Inbox header (with title and dropdown), the scrollable list of notifications, and the footer.

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

function NotificationFeed() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
    >
      <Notifications />
    </Inbox>
  );
}

export default NotificationFeed;

InboxContent component

The InboxContent component renders everything the Notifications component does, but with one key addition: the Preferences page. This allows users to manage their notification settings directly from the component.

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

function NotificationFeed() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
    >
      <InboxContent />
    </Inbox>
  );
}

export default NotificationFeed;

Building a custom popover

Use the Notifications or InboxContent components inside your own popover to keep all of Novu’s notification functionality while integrating with any external UI library. Trigger the popover with the Bell component or your own custom trigger.

function CustomPopoverPage() {

  return (
      <Inbox
        applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
        subscriber="YOUR_SUBSCRIBER_ID"
      >
        <Popover>
          <PopoverTrigger>
            <Bell />
          </PopoverTrigger>
          <PopoverContent className="h-[600px] w-[400px] p-0">
            <Notifications />
          </PopoverContent>
        </Popover>
      </Inbox>
  );
}
export default CustomPopoverPage;
```

function CustomPopoverPage() {

  return (
      <Inbox
        applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
        subscriber="YOUR_SUBSCRIBER_ID"
      >
        <Popover>
          <PopoverTrigger>
            <Bell />
          </PopoverTrigger>
          <PopoverContent className="h-[600px] w-[400px] p-0">
            <InboxContent />
          </PopoverContent>
        </Popover>
      </Inbox>
  );
}
export default CustomPopoverPage;
```

import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"; import { Inbox, InboxContent } from "@novu/react";

export default function NovuInbox() { return ( <div className="min-h-screen p-8"> <Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID" > <Drawer direction="left"> <DrawerTrigger className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] darkhoverbg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5" > Open Drawer </DrawerTrigger> <DrawerContent className="w-[300px]"> <DrawerHeader> <DrawerTitle>Novu Inbox</DrawerTitle> </DrawerHeader> <InboxContent /> </DrawerContent> </Drawer> </Inbox> </div> ); }

  </Tab>
</Tabs>