# Set up the Inbox (/platform/inbox/setup-inbox)

Learn how to integrate the Novu Inbox component into your application to display real-time notifications for your subscribers.

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import Link from 'next/link';

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:

<Tabs items={['Next.js', 'React']}>
  <Tab value="Next.js">
    <Tabs groupId="package-manager" persist items={}>
      <Tab value="npm">
        ```bash
        npm install @novu/nextjs
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add @novu/nextjs
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add @novu/nextjs
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add @novu/nextjs
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="React">
    <Tabs groupId="package-manager" persist items={}>
      <Tab value="npm">
        ```bash
        npm install @novu/react
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add @novu/react
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add @novu/react
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add @novu/react
        ```
      </Tab>
    </Tabs>
  </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.

![Inbox keyless](/images/inbox/keyless-inbox.png)

<Tabs items={['Next.js', 'React']}>
  <Tab value="Next.js">
    ```tsx
    import { Inbox } from '@novu/nextjs';

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

  <Tab value="React">
    ```tsx
    import { Inbox } from '@novu/react';

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

<Callout type="info">This is only for testing, the data is temporary (expires in 24h) and not tied to real subscribers.</Callout>

## 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 <a href="https://dashboard.novu.co/subscribers" target="_blank" rel="noopener noreferrer" class="nx-text-primary-600 nx-underline">Novu Dashboard</a>.

### US region (default)

<Tabs items={['Next.js', 'React']}>
  <Tab value="Next.js">
    ```tsx
    import { Inbox } from '@novu/nextjs';

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

  <Tab value="React">
    ```tsx
    import { Inbox } from '@novu/react';

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

<div className="text-sm text-gray-500 text-center mt-2">
  <Link href="https://dashboard.novu.co/auth/sign-up">Sign in</Link> to get your own API keys
</div>

### 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:

<Tabs items={['Next.js', 'React']}>
  <Tab value="Next.js">
    ```tsx
    import { Inbox } from '@novu/nextjs';

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

  <Tab value="React">
    ```tsx
    import { Inbox } from '@novu/react';

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

<div className="text-sm text-gray-500 text-center mt-2">
  <Link href="https://dashboard.novu.co/auth/sign-up">Sign in</Link> to get your own API keys
</div>