The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.

Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It's in React today, and soon will be available in other popular frameworks including Vue, React Native, and full headless.

Getting Started

Design Files

To aide 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.

description: 'Learn how to integrate the Novu Inbox component into your application to display real-time notifications for your users.' icon: 'Bell'

You can add the Novu Inbox component to your application with a few lines of code.

Try Inbox in keyless mode

Keyless mode lets you test the look and features of the Inbox component instantly in your application, no setup required.

import { Inbox } from '@novu/nextjs';
 
export function Novu() {
  return (
    <Inbox />
  );
}

Use Inbox with real subscribers

To display real-time notifications for your users, connect the Inbox component to your Novu environment using your applicationIdentifier and a subscriberId. You can create or manage subscribers from the Novu Dashboard.

US Region (Default)

import { Inbox } from '@novu/nextjs';
 
export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
    />
  );
}

EU region

If your Novu account is in the EU region, then include the backendUrl and socketUrl props to connect to EU-specific API endpoints:

import { Inbox } from '@novu/nextjs';
 
export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
      backendUrl="https://eu.api.novu.co"
      socketUrl="https://eu.ws.novu.co"
    />
  );
}