@vetaui/notifications-kit

Provider-agnostic in-app notifications for Next.js — inbox, unread bell, per-channel preferences, realtime subscribe.

Install

pnpm add @vetaui/notifications-kit @vetaui/foundations @vetaui/atoms @vetaui/molecules

Configure once

import { configureVeta } from "@vetaui/foundations/runtime";
import { mockNotificationsStrategy } from "@vetaui/notifications-kit/strategies";

configureVeta({
  notifications: mockNotificationsStrategy({ initialItems: seed }),
});

Use anywhere

import { NotificationBell, NotificationInbox } from "@vetaui/notifications-kit";
import { InboxPage, PreferencesPage } from "@vetaui/notifications-kit/screens";

<NotificationBell onClick={() => router.push("/notifications")} />

<InboxPage onSelect={(n) => router.push(n.url ?? "/")} />

<PreferencesPage
  categories={[
    { key: "billing", label: "Billing", description: "Receipts, refunds, plan changes." },
    { key: "system",  label: "System alerts" },
    { key: "team",    label: "Team activity" },
  ]}
/>

Public imports to use in client apps

import { NotificationBell, NotificationInbox } from "@vetaui/notifications-kit";
import { InboxPage, PreferencesPage } from "@vetaui/notifications-kit/screens";
import { mockNotificationsStrategy } from "@vetaui/notifications-kit/strategies";

Avoid importing from src/*; the package only guarantees the root, /screens, and /strategies entry points.

Adapters

| Adapter | Realtime | Preferences | Web push | | --------------------------- | -------- | ----------- | -------- | | mockNotificationsStrategy | ✓ | ✓ | — |

Custom adapter? Implement NotificationsStrategy from @vetaui/notifications-kit/strategies — only list is required, the rest are optional and screens degrade automatically via getCapabilities().