Skip to main content
Add real-time in-app notifications to your application with the Novu Inbox component. Install a client SDK such as @novu/react, render the <Inbox /> component with your application identifier and subscriber ID, and Novu handles delivery, unread counts, and preferences. The Novu Inbox is a prebuilt, ready-to-use, and fully customizable UI component for delivering real-time in-app notifications. It gives your subscribers a centralized place to view and manage notifications. Novu Inbox component showing bell icon, notification list, and preferences panel

​
What is the composable Inbox architecture?

The Novu Inbox is built with a composable architecture. It is composed of other sub-components:

Bell

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

Notifications

Displays the notifications list

InboxContent

Displays the content of the <Inbox /> menu

Preferences

Used to display the preferences modal
Fully functional and customizable React Inbox component with bell, notification feed, and preference controls By composing these individual components, you can create multiple popular inbox layouts that fit perfectly within your application’s design.
To aid your design process, we provide a free Figma file that contains all of the design assets. Make a copy of the file into your own account to get started with customizing your graphical Inbox elements.

​
What features does the Inbox include?

  • Full stack integration: The Inbox handles UI, unread states, routing, and preferences all in one place.
  • Highly customizable: Override styles, replace every UI elements and icons.
  • Flexible layouts: Use the default Inbox UI layout or build your own.
  • Built-in support for Tabs and filters, localization, snoozing, preferences management, and more.

​
How does the Novu Inbox component work?

At a high level, the Inbox abstracts away the complexity of building an in-app notification feed.
  1. When you drop the Inbox component into your application, it securely connects to Novu’s services.
  2. It automatically fetches user notifications and manages the real-time unread count displayed on the bell icon.
  3. When a user clicks the bell, it presents the list of notifications and user preferences.
  4. All user interactions, such as marking a notification as read or changing a preference, are automatically synchronized with the Novu backend in real-time.

​
What are the ways to implement the Novu Inbox?

There are two integration approaches, depending on your needs for speed versus customization.
This is the fastest way to integrate the Novu Inbox. The Inbox component, encapsulate all the UI and logic. You simply drop the component into your application, configure it with the necessary properties, and you’re done.

​
Frequently asked questions

Follow a framework quickstart such as Next.js or React. Install the SDK, add the <Inbox /> component with your application identifier and subscriber ID, then trigger a workflow from the Novu Dashboard.
Yes. Override styles, replace sub-components, or use headless hooks from @novu/react or @novu/js to build a fully custom Inbox experience.
Yes. The Inbox includes built-in preference management so subscribers can control which workflows and channels they receive notifications through.
The @novu/react package requires React 18.0.0 or later. React 19 is also supported. React 17 and earlier versions are not supported.