React Client SDK

Use @chimekit/react to embed the ChimeKit inbox, feed, preferences, and bell in your React app.

Setup

Install once and add the global styles:

npm install @chimekit/react

import "@chimekit/react/styles.css";
// Tailwind (optional): if you want utilities to override ChimeKit styles,
// use your global CSS instead:
// @import "@chimekit/react/styles.css" layer(components);

Tailwind users can keep the JS import. Use the layered @import only when you want Tailwind utilities to override ChimeKit styles.

Wrap member-facing widgets with the provider:

import { ChimeKitProvider } from "@chimekit/react";

export function App({ memberToken }: { memberToken: string }) {
  return (
    <ChimeKitProvider
      publicKey={process.env.NEXT_PUBLIC_CHIMEKIT_PUBLIC_KEY!}
      token={memberToken}
      audienceMember={{ id: "user_123" }}
    >
      {/* widgets */}
    </ChimeKitProvider>
  );
}

Provider setup and auth

ChimeKitProvider requires:

• publicKey (your ChimeKit public key)
• audienceMember (the logged-in user, at minimum { id: string })
• either token or getToken

Optional props include baseUrl and onAuthError. baseUrl defaults to https://api.chimekit.com/member/v1.

audienceMember supports optional fields: displayName, email, externalUserId, avatarUrl, and traits.

Dynamic token example:

import { ChimeKitProvider, Inbox } from "@chimekit/react";

const getToken = async () => {
  const response = await fetch("/api/chimekit/token");
  if (!response.ok) {
    throw new Error("Failed to fetch ChimeKit token");
  }
  const data = await response.json();
  return data.token;
};

<ChimeKitProvider
  publicKey="ck_pub_..."
  audienceMember={{ id: "user_123" }}
  getToken={getToken}
  onAuthError={(error) => {
    console.error("ChimeKit auth error", error);
  }}
>
  <Inbox variant="popover" />
</ChimeKitProvider>;

Client access

Use the hook to access the member client, public key, token, and audience member:

import { useChimeKit } from "@chimekit/react";

const { client, audienceMember, publicKey } = useChimeKit();

Components

The components below are exported from @chimekit/react.

Inbox

Use case: all-in-one bell + feed + preferences + message details.

import { Inbox } from "@chimekit/react";

export function Notifications() {
  return <Inbox variant="popover" primaryColor="#2563eb" />;
}

Key props (what they do):

• variant: pick how the inbox is displayed ("popover", "modal", "drawer").
• width, maxFeedHeight: size constraints for the container and feed viewport.
• primaryColor: override the accent/brand color.
• onActionCallback(actionId): callback when a CTA uses the callback kind.
• labels: replace built-in copy (title, tab labels, preferences title).
• bellProps, feedProps, messageDetailsProps, preferencesProps: forward props to internal subcomponents.
• classes: slot-level className overrides for targeted styling.

Feed

Use case: standalone message list with pagination/actions.

import { Feed } from "@chimekit/react";

export function Messages() {
  return <Feed type={["unread", "read"]} maxFeedHeight={480} />;
}

Key props (what they do):

• type / category: filter messages.
• showCategory: show category labels in the list.
• onMarkRead / onMarkUnread / onArchive / onUnarchive: side-effects or analytics.
• onActionCallback: callback for CTA actions of kind callback.
• onMessageClick: called when a row is clicked (receives message object).
• renderMessage / renderEmpty / renderLoading / renderError: custom renderers.
• classes: slot styling overrides.
• maxFeedHeight: constrain feed height.

Render overrides:

• renderMessage(props): props include message, index, the action handlers, onActionCallback, and forceArchivedActions.
• renderEmpty(), renderLoading(), renderError(error: string): replace built-in states.

MessageDetails / MessageDetailsDialog

Use case: render a single notification body + actions.

import { MessageDetails } from "@chimekit/react";

<MessageDetails messageId="msg_123" displaySnippet onActionCallback={handleAction} />;

import { MessageDetailsDialog } from "@chimekit/react";

<MessageDetailsDialog
  open={open}
  onOpenChange={setOpen}
  messageId={selectedId}
  onActionCallback={handleAction}
/>;

Key props:

• messageId (required)
• displaySnippet: show snippet above body.
• maxHeight: scroll constraint.
• sanitizeHtml: customize the HTML sanitizer for message bodies.
• onActionCallback: callback for CTA actions of kind callback.
• renderLoading / renderError: override states.
• classes: slot styling.

Render overrides:

• renderLoading()
• renderError(error: string)

Preferences / PreferencesDialog

Use case: member notification channel/category settings.

import { Preferences } from "@chimekit/react";

<Preferences renderSuccess={(msg) => <div>{msg}</div>} />;

import { PreferencesDialog } from "@chimekit/react";

<PreferencesDialog open={open} onOpenChange={setOpen} />;

Key props:

• renderLoading / renderError / renderSuccess / renderEmpty / renderAccessDenied: override states.
• classes: table/row/checkbox/button styling.

Render overrides are zero-arg functions except renderError(message: string) and renderSuccess(message: string).

Bell

Use case: standalone trigger (works without provider).

import { Bell } from "@chimekit/react";

<Bell unread={3} size="md" onClick={() => console.log("open inbox")} />;

Key props:

• unread: boolean or count.
• size: "sm" | "md" | "lg".
• onClick: click handler.
• renderIcon / renderUnreadDot: override icon or unread indicator.
• classes: slot styling.

Render overrides:

• renderIcon() for a custom SVG/icon component.
• renderUnreadDot(unread: boolean | number) for custom indicator.

Types

Useful types exported from @chimekit/react:

• ChimeKitAudienceMember
• ChimeKitClient
• ChimeKitFetcherOptions
• ChimeKitInboxFilters
• ChimeKitProviderProps
• ChimeKitAction, ChimeKitCallbackAction, ChimeKitLinkAction