novu-inbox-integration

Files (8)

• SKILL.md
• branding-and-styling.md · references/
• headless-inbox-examples.md · references/
• multi-tenancy.md · references/
• nextjs-inbox-examples.md · references/
• personalization.md · references/
• react-inbox-examples.md · references/
• security.md · references/

SKILL.md (first lines)

# Inbox Integration

Add an in-app notification center to your web application. The Inbox component provides a bell icon, notification feed, read/archive management, action buttons, and real-time WebSocket updates — all theme-able and personalizable to match your product.

## Packages

| Package | Use For |
| --- | --- |
| `@novu/react` | React 18/19 applications |
| `@novu/nextjs` | Next.js (App Router + Pages Router) |
| `@novu/js` | Vanilla JavaScript / non-React frameworks |

## React Quick Start

```bash
npm install @novu/react
```

```tsx
import { Inbox } from "@novu/react";

function App() {
  return (
    <Inbox
      applicationIdentifier="YOUR_NOVU_APP_ID"
      subscriberId="subscriber-123"
      subscriberHash="HMAC_HASH"  // Required if HMAC encryption is enabled
    />
  );
}
```

This renders a bell icon with unread count. Clicking it opens a popover with the notification feed.

## Next.js

```bash
npm install @novu/nextjs
```

### App Router

```tsx
// components/NotificationInbox.tsx
"use client";

import { Inbox } from "@novu/nextjs";

export function NotificationInbox() {
  return (
    <Inbox
      applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
      subscriberId="subscriber-123"
      subscriberHash="HMAC_HASH"
    />
  );
}
```

**Important:** The Inbox is a client component — use `"use client"` directive in Next.js App Router.

### Pages Router

```tsx
import { Inbox } from "@novu/nextjs";

export default function NotificationsPage() {
  return (
    <Inbox
      applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!}
      subscriberId="subscriber-123"
      subscriberHash="HMAC_HASH"
    />
  );
}
```

## Composable Components

The `<Inbox>` component is composable. When you pass children, it acts as a context provider and you compose the UI from primitives:

| Component | Purpose |
| --- | --- |
| `<Bell />` | Bell icon with unread count |
| `<Notifications />` | Notification feed (header + list + footer) |
| `<InboxContent />` | Same as `<Notifications />` plus the Preferences page |
| `<Preferences />` | Standalone preferences panel |

```tsx
import { Inbox, Bell, Notifications, Preferences } from "@novu/react";

function App() {
  return (
    <Inbox
      applicationIdentifier="YOUR_NOVU_APP_ID"
      subscriberId="subscriber-123"
      subscriberHash="HMAC_HASH"
    >
      <Bell />
      <Notifications />
      <Preferences />
    </Inbox>
  );
}
```

Use these primitives to build a custom popover, modal, drawer, or full-page notification experience.

## Branding the Inbox

The Inbox is fully themeable via the `appearance` prop. It supports four keys:

| Key | Purpose |
| --- | --- |
| `baseTheme` | Apply a predefined theme (e.g. `dark`) |
| `variables` | Global design tokens (colors, fonts, radius, severity colors) |
| `elements` | Per-element styles (style object, class string, or context callback) |
| `icons` | Replace built-in icons with your own React components |

From novuhq/skills, MIT.

More from novuhq/skills