The Inbox component displays a notification bell by default, which opens a menu containing the subscriber's notifications and preferences.

Installation

To get started, install the Inbox UI:

Install @novu/nextjs. Add the <Inbox /> component to your header, navbar, or sidebar.

Latest docs: https://docs.novu.co/platform/quickstart/nextjs

Install

npm install @novu/nextjs

Component

'use client';
import { Inbox } from '@novu/nextjs';

export default function NotificationInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
    />
  );
}

Subscriber ID

Use the app's existing auth system to get a unique user identifier for subscriberId. Check for Clerk, NextAuth, Firebase, Supabase, or custom auth. If no auth system exists, use YOUR_SUBSCRIBER_ID.

Appearance

Extract design tokens from the host app (Tailwind config, CSS variables, theme objects) and apply them via the appearance prop. Only include values you extracted from the host design system — omit empty or placeholder appearance values.

Rules

ALWAYS:

• Detect the project's package manager and use it for installation
• Extract design tokens and apply via the appearance prop
• Place <Inbox /> inline in existing UI — no new pages or wrappers
• Use TypeScript, no comments, no empty props
• Follow Next.js conventions
• Use the existing auth system to source subscriberId when available

NEVER:

• Add empty appearance values or placeholder props
• Create wrapper components or new pages just for the inbox
• Add code comments
• Introduce styles not in the host app
• Add unused props or imports

Verify Before Responding

1. Is @novu/nextjs installed with the project's package manager?
2. Is <Inbox /> placed inline in existing UI?
3. Are design tokens extracted and applied?
4. Are all props non-empty and properly typed?
5. Is subscriberId sourced from the auth system when available?

If any fails, revise. </Prompt> </Tab> <Tab title="React"> <Prompt description="Add Novu Inbox to my React app" icon="sparkles" actions={["copy", "cursor"]}>

Add Novu Inbox to React App

Install @novu/react. Add the <Inbox /> component to your header, navbar, or sidebar.

Latest docs: https://docs.novu.co/platform/quickstart/react

Install

npm install @novu/react

Component

import { Inbox } from '@novu/react';
import { useNavigate } from 'react-router-dom';

export default function NotificationInbox() {
  const navigate = useNavigate();

  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      routerPush={(path) => navigate(path)}
    />
  );
}

Subscriber ID

Use the app's existing auth system to get a unique user identifier for subscriberId. Check for Clerk, NextAuth, Firebase, Supabase, or custom auth. If no auth system exists, use YOUR_SUBSCRIBER_ID.

Appearance

Extract design tokens from the host app (Tailwind config, CSS variables, theme objects) and apply them via the appearance prop. Only include values you extracted from the host design system — omit empty or placeholder appearance values.

Rules

ALWAYS:

• Detect the project's package manager and use it for installation
• Extract design tokens and apply via the appearance prop
• Place <Inbox /> inline in existing UI — no new pages or wrappers
• Use TypeScript, no comments, no empty props
• Follow React conventions
• Use the existing auth system to source subscriberId when available

NEVER:

• Add empty appearance values or placeholder props
• Create wrapper components or new pages just for the inbox
• Add code comments
• Introduce styles not in the host app
• Add unused props or imports

Verify Before Responding

1. Is @novu/react installed with the project's package manager?
2. Is <Inbox /> placed inline in existing UI?
3. Are design tokens extracted and applied?
4. Are all props non-empty and properly typed?
5. Is subscriberId sourced from the auth system when available?

If any fails, revise. </Prompt> </Tab> </Tabs>

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.

export function Novu() {
  return (
    <Inbox />
  );
}
```

export function Novu() {
  return (
    <Inbox />
  );
}
```

Use Inbox with real subscribers

To display real-time notifications for your subscribers, 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)

export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
    />
  );
}
```

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:

export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
      backendUrl="https://eu.api.novu.co"
      socketUrl="wss://eu.socket.novu.co"
    />
  );
}
```

export function Novu() {
  return (
    <Inbox
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriber="SUBSCRIBER_ID"
      backendUrl="https://eu.api.novu.co"
      socketUrl="wss://eu.socket.novu.co"
    />
  );
}
```

Pass subscriber profile fields

Pass a subscriber object instead of a subscriber ID string to set profile fields such as firstName, email, locale, and data on session init. New subscribers are created automatically; updating an existing profile requires HMAC encryption and subscriberHash.