docs/platform/quickstart/remix.mdx
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"]}>
Install @novu/react. Add the <Inbox /> component to your header, navbar, or sidebar.
Latest docs: https://docs.novu.co/platform/quickstart/remix
npm install @novu/react
import { Inbox } from '@novu/react';
export default function NotificationInbox() {
return (
<Inbox
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
subscriberId="YOUR_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.
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.
ALWAYS:
<Inbox /> inline in existing UI — no new pages or wrappersNEVER:
@novu/react installed with the project's package manager?<Inbox /> placed inline in existing UI?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
npx create-remix@latest
```
Run the following command to install the SDK:
npm install @novu/react
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>
```tsx title="app/root.tsx"
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>
);
}
```
```package-install
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!
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.
Go to your Novu dashboard.
In the sidebar, click Workflows.
Click Create Workflow. Enter a name for your workflow (e.g., "Welcome Notification").
Click Create Workflow to save it.
Click the Add Step icon in the workflow editor and then select In-App as the step type.
In the In-App template editor, enter the following:
Once you’ve added the subject and body, close the editor.
Click Trigger.
Click Test Workflow.
You should see the notification you just sent from Novu! 🎉
</Step> </Steps>