> ## Documentation Index
> Fetch the complete documentation index at: https://novu-c5de82d9-docs-homepage-redesign.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Remix In-App Notifications Quickstart — Novu Inbox

> Integrate Novu in-app notifications into your Remix application. Follow step-by-step setup from install to first notification.

Add real-time in-app notifications to Remix in under 10 minutes using the Novu Inbox component.

<Prompt description="Add Novu Inbox to my Remix app" icon="sparkles" actions={["copy", "cursor"]}>
  # Add Novu Inbox to Remix App

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

  Latest docs: [https://docs.novu.co/platform/quickstart/remix](https://docs.novu.co/platform/quickstart/remix)

  ## Install

  ```bash theme={null}
  npm install @novu/react
  ```

  ## Component

  ```tsx theme={null}
  import { Inbox } from '@novu/react';

  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
  * Follow Remix conventions for loaders and routing
  * 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

  ## 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. Is subscriberId sourced from the auth system when available?

  If any fails, revise.
</Prompt>

<Steps>
  <Step>
    ### Create a Novu account

    [Create a Novu account](https://dashboard.novu.co/auth/sign-up) or [sign in](https://dashboard.novu.co/auth/sign-in) to access the Novu dashboard.
  </Step>

  <Step>
    ### Create a Remix application

    Run the following command to create a new Remix app:

    ```package-install theme={null}
    npx create-remix@latest
    ```
  </Step>

  <Step>
    ### Install `@novu/react`

    The [Novu React SDK](/platform/sdks/react) gives you access to the Inbox component.

    Run the following command to install the SDK:

    ```package-install theme={null}
    npm install @novu/react
    ```
  </Step>

  <Step>
    ### Create an Inbox component

    In the `app` directory, create a `components/notification-center.tsx` file and use the [`<Inbox />`](/platform/inbox) component, passing <Tooltip tip="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page.">applicationIdentifier</Tooltip> and <Tooltip tip="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database.">subscriberId</Tooltip>:

    <Note>
      Explore the full `remix-inbox` example in the [Novu examples repository](https://github.com/novuhq/novu).
    </Note>

    If you’re signed in to your Novu account, then the <Tooltip tip="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page.">applicationIdentifier</Tooltip> and <Tooltip tip="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database.">subscriberId</Tooltip> are automatically entered in the code sample above. Otherwise, you can manually retrieve them:

    * `applicationIdentifier` – In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
    * `subscriberId` – This represents a user in your system (typically the user's ID in your database). For quick start purposes, an auto-generated subscriberId is provided for your Dashboard user.

    <Note>
      If you pass a `subscriberId` that does not exist yet, Novu will automatically create a new subscriber with that ID.
    </Note>
  </Step>

  <Step>
    ### Add the Inbox component to your layout

    Now you can import the `NotificationCenter` component and add it to your app layout:

    ```tsx title="app/root.tsx" theme={null}

    export const meta: MetaFunction = () => {
      return [
        { title: "New Remix App" },
        { name: "description", content: "Welcome to Remix!" },
      ];
    };

    export default function App() {
      return (
        <html lang="en">
          <head>
            <Meta />
            <Links />
          </head>
          <body>
            <nav>
              <NotificationCenter />
            </nav>
            <Outlet />
            <ScrollRestoration />
            <Scripts />
            <LiveReload />
          </body>
        </html>
      );
    }
    ```
  </Step>

  <Step>
    ### Run Your Application

    Start your development server:

    ```package-install theme={null}
    npm run dev
    ```

    Once the application is running, a bell icon will appear in the navbar. Clicking it opens the notification inbox UI.

    Currently, there are no notifications. Let’s trigger one!
  </Step>

  <Step>
    ### Trigger your first notification

    In this step, you'll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard.

    1. Go to your [Novu dashboard](https://dashboard.novu.co/auth/sign-in).

    2. In the sidebar, click **Workflows**.

    3. Click **Create Workflow**. Enter a name for your workflow (e.g., "Welcome Notification").

    4. Click **Create Workflow** to save it.

    5. Click the **Add Step** icon in the workflow editor and then select **In-App** as the step type.

    6. In the In-App template editor, enter the following:

       * **Subject**: "Welcome to Novu"
       * **Body**: "Hello, world! "

    7. Once you’ve added the subject and body, close the editor.

    8. Click **Trigger**.

    9. Click **Test Workflow**.
  </Step>

  <Step>
    ### View the notification in your app

    Go back to your React app, then click the bell icon.

    You should see the notification you just sent from Novu! 🎉
  </Step>
</Steps>

## Next steps

<Columns cols={2}>
  <Card title="Styling" icon="palette" href="/inbox/react/styling">
    Customize the look and feel of your Inbox to match your application's design.
  </Card>

  <Card title="Inbox and preferences UI components" icon="library" href="/platform/inbox">
    Explore our full-stack UI components libraries for building in-app notifications.
  </Card>

  <Card title="Build Workflow" icon="workflow" href="/platform/workflow">
    Design and manage advanced notification workflows.
  </Card>

  <Card title="Multi Tenancy" icon="square-code" href="/platform/concepts/tenants">
    Manage multiple tenants within an organization.
  </Card>
</Columns>