We were not happy with the polish level of our previous Inbox, so the team focused on the little things that make a fantastic notification experience: Loading State, pixel-perfect designs, Micro Interactions, and even more customizability.

npm install @novu/react

Polished micro-interactions

We improved the general speed of all the actions including marking a notification as seen, archiving, and CTA clicks. The Inbox feels faster than ever.

Improved Next.js compatibility

We have improved the support for Page and App router in Next.js out of the box. All navigation is now handled automatically when importing from the @novu/nextjs package.

import { Inbox } from '@novu/nextjs';
 
function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
    />
  );
}

New customization props

Previously, to render a custom body or subject, you had to rebuild the whole <NotificationItem /> component from scratch. With this release, we allow to override only the specific notification elements:

import { Inbox } from '@novu/react';
 
function Novu() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      renderBody={(notification) => (
        <div>
          <p>{notification.body}</p>
        </div>
      )}
    />
  );
}

Product hunt Launch

Support us on ProductHunt via this link