Skip to main content
This guide walks you through integrating Novu’s Inbox into your React application for in-app notifications in real-time, from setup to triggering your first notification. By the end, you’ll have a working notification inbox.
1

​
Create a Novu account

Create a Novu account or sign in to access the Novu dashboard.
2

​
Create a React app using Vite

Run the following command to create a new React app using Vite:
npm create vite@latest novu-inbox-react -- --template react-ts
cd novu-inbox-react
npm install
npm run dev
3

​
Install @novu/react

The Novu React SDK gives you access to the Inbox component.Run the following command to install the SDK:
npm install @novu/react
4

​
Create the Inbox component

In the src directory, create a components/novu-inbox.tsx file and use the <Inbox /> component, passing and :
Explore the full react-inbox example in the Novu examples repository.
If you’re signed in to your Novu account, then the and 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.
If you pass a subscriberId that does not exist yet, Novu will automatically create a new subscriber with that ID.
5

​
Set up React Router and import the Inbox component

Now you can set up React Router and add the NovuInbox component to your app layout:
src/App.tsx

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>
        <NovuInbox />
      </nav>
      {children}
    </div>
  );
}

function Home() {
  return <div>Welcome to the Home page!</div>;
}

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          {/* Add your routes here */}
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;
6

​
Run Your Application

Start your development server:
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!
7

​
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.
  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.
8

​
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! 🎉

​
Next steps

Styling

Customize the look and feel of your Inbox to match your application’s design.

Inbox and preferences UI components

Explore our full-stack UI components libraries for building in-app notifications.

Build Workflow

Design and manage advanced notification workflows.

Multi Tenancy

Manage multiple tenants within an organization.