Building in-app UI in React

Learn more about the in-app notifications experiences you can build in React with Knock. Easily power notification feeds, toasts, and inbox experiences.

Our @knocklabs/react library lets you create notification experiences using Knock's APIs. It comes with pre-built UI components that you can use to easily get up and running with a fully functional notification feed experience in your product.

⚠️
New Knock React components. If you're currently using @knocklabs/react-notification-feed, check out our migration guide to learn how to use our new React library.

Pre-built components

The Knock React SDK ships the following pre-built UI elements:

In-app notifications

  • NotificationFeedPopover: a managed popover for displaying a list of notifications.
  • NotificationFeed: a full-page list of notifications.
  • NotificationIconButton: for adding a bell icon to your application that shows the current count of unread or unseen notifications.

SlackKit

  • SlackChannelCombobox: for picking one or more Slack channels to route notifications to.
  • SlackAuthButton: for managing the OAuth process between your Slack application and your customer's Slack workspace.

Hooks for headless UI

If you don't want to use the pre-built UI components, you can also use this library in a headless way and bring your own UI. The Knock React SDK includes a complete set of React hooks that you can use to build your own UI on top of.

Guides