Notifications

Details

What Notifications brings along, read from the registry and the source.

Area

App

Variants

6

Version

1.0.2 · since 1.0.0

File

components/ui/notifications.tsx

Brings along

utilskitbuttoniconsidebarswitch

npm packages

None

Languages

English and German, 133 texts of its own

Studio

Adjust in code

In collections

App dashboard

Build with AI

Over MCP in Claude, Cursor, Copilot and Codex

Props

The NotificationsProps interface from components/ui/notifications.tsx, with the comments from the code.

• variantoptional
  NotificationsVariant

  centeraudit-logpopoverchannel-settingsdigestannouncements

• sidebaroptional
  Omit<SidebarProps, 'children'>

  App frame for every variant except popover

• titleoptional
  string
• subtitleoptional
  string
• actionsoptional
  React.ReactNode
• itemsoptional
  NotificationEntry[]

  center, popover

• incomingoptional
  NotificationEntry[]

  center and popover: notifications that arrive while the page is open (they fly in after a moment)

• settingsHrefoptional
  string

  center, popover: where the settings or the full list live

• allHrefoptional
  string
• eventsoptional
  AuditEvent[]

  audit-log

• defaultSelectedoptional
  string

  audit-log: the event shown in the detail panel at first (wide screens)

• channelsoptional
  Channel[]

  channel-settings

• groupsoptional
  { title: string; events: EventPreference[] }[]
• quietHoursoptional
  { on?: boolean; from?: string; to?: string; days?: number[]; urgent?: boolean }
• digestoptional
  { frequency?: 'off' | 'daily' | 'weekly'; time?: string; next?: { daily: string; weekly: string } }
• onSaveoptional
  (prefs: unknown) => void
• weeksoptional
  DigestWeek[]

  digest: oldest first, the last one is shown

• announcementsoptional
  Announcement[]

  announcements

• roadmapoptional
  { title: string; when: string }[]
• appoptional
  { brand: { name: string; logo?: React.ReactNode }; nav?: string[]; user: string }

  popover: the app bar and the page behind

• pageoptional
  React.ReactNode
• defaultOpenoptional
  boolean
• currencyoptional
  string

Built-in texts

Notifications writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.