Inbox styling

The Inbox component ships with a default look. Everything about it can be changed from the appearance prop of <Inbox /> in @notiflyio/react, and the same options are accepted by @notiflyio/js when you mount the UI yourself. Two further levers go beyond styling: render props that replace parts of a notification, and the notification's data object that carries extra fields for your own rendering.

import { Inbox } from '@notiflyio/react';

<Inbox
  applicationIdentifier="<app-identifier>"
  subscriber="<subscriber-id>"
  appearance={{
    variables: { colorPrimary: '#0f766e', borderRadius: '0.75rem' },
    elements: { bellIcon: { color: '#0f766e' } },
    animations: false,
  }}
/>

The appearance object has four optional parts and a base theme:

Variables

variables are the quickest way to match your brand. These are all of them, with the value used when you set none:

The three severity colors mark the bell and the notifications of workflows that have a severity set.

Elements

elements restyles one part of the UI at a time. Each key names a part, for example bellIcon, bellContainer, bellDot, inboxHeader, notificationList, notification, notificationSubject and notificationBody. Common building blocks (root, button, input, icon, badge, popoverContent) apply across the whole Inbox. Each value can be written three ways:

• A string of class names, such as 'rounded-xl shadow-lg'. Classes from several keys that touch the same property are merged with tailwind-merge, with the more specific key winning.
• An object of CSS properties, such as { backgroundColor: '#fff7ed' }.
• A function that returns a class string, for the keys that expose context. The context depends on the element, for example the notification for the notification key and unreadCount for the bell keys.

appearance={{
  elements: {
    notification: ({ notification }) =>
      notification.isRead ? 'opacity-70' : 'border-l-4 border-teal-600',
    notificationSubject: { fontWeight: 700 },
  },
}}

A key written with a double underscore extends the part on its right. severityHigh__notification styles notification only for high-severity notifications, and a __icon key such as workflowArrow__icon styles the icon inside that part. Both the specific key and the base key apply, so you can set a shared style on button and override one button with back__button.

Every styled element also carries a stable class named nv-<key> (for example nv-notification), so your own stylesheet can target it.

Dark theme and base themes

A theme is an object with variables and elements, in the same shapes as above. Import the ready-made dark theme from the themes entry point and pass it as the base theme:

import { Inbox } from '@notiflyio/react';
import { inboxDarkTheme } from '@notiflyio/react/themes';

<Inbox
  applicationIdentifier="<app-identifier>"
  subscriber="<subscriber-id>"
  appearance={{ baseTheme: inboxDarkTheme }}
/>

variables and elements are layered in this order, later layers winning: the defaults above, each base theme in array order, then your own appearance. icons and animations are not layered: they are read only from the top-level appearance, so set them there rather than inside a base theme. That lets you switch the base theme with your app's color scheme and keep your brand overrides in one place.

Icons

icons replaces a built-in icon. In React each entry is a function that receives { class } and returns a node; pass the class through so the icon keeps its sizing:

appearance={{
  icons: {
    bell: ({ class: className }) => <MyBellIcon className={className} />,
  },
}}

The Inbox icon keys are bell, clock, arrowDropDown, dots, markAsRead, trash, markAsArchived, markAsArchivedRead, markAsUnread, markAsUnarchived, unsnooze, arrowRight, arrowLeft, unread, sms, inApp, email, push, chat, routeFill, info, calendarSchedule, copy, plus the shared cogs, check, arrowDown and nodeTree. In @notiflyio/js an icon renderer instead receives the element to draw into and returns a cleanup function.

Render your own pieces

When styling is not enough, <Inbox /> accepts render props. Each receives the notification (or, for the bell, the unread count) and returns a React node:

<Inbox
  applicationIdentifier="<app-identifier>"
  subscriber="<subscriber-id>"
  renderBell={(unreadCount) => <span>{unreadCount.total} new</span>}
  renderSubject={(notification) => <strong>{notification.subject}</strong>}
/>

Other presentation props on <Inbox /> are placement and placementOffset for where the popover opens, open for controlling it, tabs for the filter tabs, and localization for text. Click handlers (onNotificationClick, onPrimaryActionClick, onSecondaryActionClick) and routerPush, which receives a notification's relative redirect path so you can navigate with your own router (absolute URLs open with window.open instead), cover behavior. The full prop list is in the @notiflyio/react README.