> ## Documentation Index
> Fetch the complete documentation index at: https://mf2.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Notifications

> In-app notification feeds powered by Knock.

`@repo/notifications` delivers in-app notifications with real-time feeds and user preference management through [Knock](https://docs.knock.app).

## Usage

Trigger a notification from the server:

```ts title="apps/api/routes/comments.ts" theme={null}
import { notify } from "@repo/notifications";

await notify({
  key: "new-comment",
  recipients: [comment.threadAuthorId],
  data: {
    commentId: comment.id,
    authorName: comment.authorName,
    threadUrl: `/threads/${comment.threadId}`,
  },
});
```

## Notification Feed

Render the feed in your app:

```tsx title="apps/app/components/notification-bell.tsx" theme={null}
import { NotificationFeed } from "@repo/notifications";

export function NotificationBell() {
  return (
    <NotificationFeed
      onNotificationClick={(notification) => {
        window.location.href = notification.data.url;
      }}
    />
  );
}
```

Wrap your app with `NotificationProvider` to enable real-time delivery:

```tsx title="apps/app/layout.tsx" theme={null}
import { NotificationProvider } from "@repo/notifications";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <NotificationProvider userId={currentUserId}>
      {children}
    </NotificationProvider>
  );
}
```

Configure workflows (delivery channels, templates, batching) in the Knock dashboard, not in code.

## Environment Variables

See [Environment Variables: Notifications](/setup/env#notifications-knock).

## Learn More

* [Knock documentation](https://docs.knock.app)