Novu Inbox — In-App Notification Component for React - Novu

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.

What is the composable Inbox architecture?

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

<Columns cols={2}> <Card title="Bell" icon="bell" href="/platform/inbox/advanced-customization/customize-bell#bell-component"> Used to display the bell icon and trigger the notification component when clicked </Card> <Card title="Notifications" icon="code" href="/platform/inbox/advanced-customization/customize-popover#notifications-component"> Displays the notifications list </Card> <Card title="InboxContent" icon="layout-dashboard" href="/platform/inbox/advanced-customization/customize-popover#inboxcontent-component" > Displays the content of the `<Inbox />` menu </Card> <Card title="Preferences" icon="sliders-horizontal" href="/platform/inbox/configuration/preferences#using-the-preferences--component"> Used to display the preferences modal </Card> </Columns>

By composing these individual components, you can create multiple popular inbox layouts that fit perfectly within your application's design.

<Tip> To aid your design process, we provide a [free Figma file](https://www.figma.com/community/file/1425407348374863860) 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. </Tip>

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.

When you drop the Inbox component into your application, it securely connects to Novu's services.
It automatically fetches user notifications and manages the real-time unread count displayed on the bell icon.
When a user clicks the bell, it presents the list of notifications and user preferences.
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.

</Tab> <Tab title="Build your own">

For maximum flexibility and complete control over the look and feel, use the @novu/react SDK for react hooks or @novu/js SDK for framework agnostic javascript methods.

You get the power of Novu's notification engine while building a user interface that perfectly matches your application's design system.

</Tab> </Tabs>

Frequently asked questions

<AccordionGroup> <Accordion title="How do I add the Inbox to my app?"> Follow a framework quickstart such as [Next.js](/platform/quickstart/nextjs) or [React](/platform/quickstart/react). Install the SDK, add the `<Inbox />` component with your application identifier and subscriber ID, then trigger a workflow from the Novu Dashboard. </Accordion> <Accordion title="Can I customize the Inbox UI?"> Yes. Override styles, replace sub-components, or use headless hooks from [`@novu/react`](/platform/sdks/react) or [`@novu/js`](/platform/sdks/javascript) to build a fully custom Inbox experience. </Accordion> <Accordion title="Does the Inbox support user notification preferences?"> Yes. The Inbox includes built-in preference management so subscribers can control which workflows and channels they receive notifications through. </Accordion> <Accordion title="How do I pass or update subscriber profile fields from the Inbox?"> Pass a `subscriber` object with fields such as `firstName`, `email`, `locale`, and `data`. New subscribers are created on the first session; updating an existing profile requires [HMAC encryption](/platform/inbox/prepare-for-production#secure-your-inbox-with-hmac-encryption) and `subscriberHash`. </Accordion> <Accordion title="What is the minimum React version required for the Inbox?"> The [`@novu/react`](/platform/sdks/react) package requires **React 18.0.0 or later**. React 19 is also supported. React 17 and earlier versions are not supported. </Accordion> </AccordionGroup>