Entry points and CSS files

An app that shows a channel list and a channel imports its components from stream-chat-react and loads index.css. If it adds the emoji picker, it also imports EmojiPicker from stream-chat-react/emojis, installs emoji-mart and @emoji-mart/data, and loads emoji-picker.css.

This page lists every entry point of the package: what it exports, which stylesheet it needs and which packages you install for it. The Installation page has the short version.

Every optional part is its own entry point, so an app that never imports it doesn't bundle it. The main entry point never imports from the others. Each entry point ships ES modules, CommonJS and TypeScript types.

stream-chat-react

The core UI. It needs stream-chat, react and react-dom, which you install with it, and the index.css stylesheet.

It doesn't re-export stream-chat. Import the client and the state classes, such as StreamChat and ChannelPaginator, from stream-chat itself.

The main exports by area:

Reference → Hooks lists the hooks by state area, starting with State and entity hooks. Every component's props are in the Component reference, starting with Chat.

stream-chat-react/slot-layout

The optional layout: ChatView decides where a channel or a thread opens. Its styles are part of index.css, and it needs no other package.

• Components: ChatView, ChannelSlot, ThreadSlot, ThreadListSlot, Slot, WorkspaceLayout, ChatViewSelectorButton, ChatViewChannelsSelectorButton, ChatViewThreadsSelectorButton, ChatViewEmptyPlaceholder and DisposedChannelRelease.
• Hooks: useChatViewContext, useChatViewNavigation, useLayoutViewState, useActiveThread, useSlotChannel, useSlotChannels, useSlotThread, useSlotThreads, useSlotEntity, useSlotEntities, useSlotTopLayerEntity, useSlotForKey and useSlotForKind.
• Saving and restoring: serializeLayoutState and restoreLayoutState.
• Types: ChatViewProps, ChatViewSlotRenderers, DeriveWorkspaceNavigation and LayoutController. LayoutController is a type only; reach the instance through useChatViewContext().layoutController.

The navigation interface itself, useWorkspaceNavigation(), comes from stream-chat-react. ChatView provides it. Without a layout, it does nothing until you provide your own WorkspaceNavigationProvider.

See Workspace with ChatView and the ChatView components reference.

stream-chat-react/slot-geometry

Detects which layout slots the user can't see: slots collapsed to nothing, or covered by another slot. It only reports; your app decides what to do, for example closing the slot that covers another. It has no stylesheet and needs no other package.

• SlotGeometryProvider measures the slots registered inside it.
• useRegisterSlotGeometry(slot) returns a callback ref for the element that backs a slot.
• useSlotGeometry() returns coverage (which slots are obscured), isObscured(slot), and requestReveal, revealSlot and clearReveal for revealing a slot after navigation.
• resolveRevealAction(revealSlot, coverage) tells you whether to wait, reveal the slot ('act') or clear the request.

Slot ids are plain strings, so it works with any layout, not only ChatView. See Responsive layouts and the Slot geometry reference.

stream-chat-react/channel-detail

The channel details views. Load channel-detail.css after index.css. It needs no other package.

• Components: ChannelDetail, AvatarWithChannelDetail, ChannelDetailProvider and SectionNavigator, with the views ChannelMembersView, ChannelMemberDetail, ChannelMediaView, ChannelFilesView, PinnedMessagesView and ChannelManagementView, and nav buttons that open them.
• Sections: defaultChannelDetailSections.
• Action sets: defaultChannelManagementActionSet, defaultChannelMemberActionSet and defaultChannelMembersHeaderActionSet, with their filter hooks useBaseChannelManagementActionSetFilter, useBaseChannelMemberActionSetFilter and useBaseChannelMembersHeaderActionSetFilter.
• Hooks: useChannelDetailContext, useSectionNavigatorContext, useChannelMembersSearch, useChannelMediaSearch, useChannelFilesSearch and usePinnedMessagesSearch.

See Channel details and members and the Channel Detail reference.

stream-chat-react/emojis

The emoji picker and emoji suggestions in the composer. Load emoji-picker.css after index.css, and install two packages:

npm install emoji-mart @emoji-mart/data

• EmojiPicker is the picker button and popover. Register it as the EmojiPicker component override. It loads @emoji-mart/data the first time the picker opens. You don't need @emoji-mart/react: the SDK wraps the emoji-mart picker itself.
• createTextComposerEmojiMiddleware(emojiSearchIndex, options?) creates the text composer middleware that suggests emojis when the user types : followed by part of an emoji name. Pass emoji-mart's SearchIndex, after calling emoji-mart's init({ data }).

import type { PropsWithChildren } from "react";
import { WithComponents } from "stream-chat-react";
import { EmojiPicker } from "stream-chat-react/emojis";

import "stream-chat-react/dist/css/index.css";
import "stream-chat-react/dist/css/emoji-picker.css";

export const WithEmojiPicker = ({ children }: PropsWithChildren) => (
  <WithComponents overrides={{ EmojiPicker }}>{children}</WithComponents>
);

See Emoji for the suggestions setup, and the Emoji Picker reference.

stream-chat-react/mp3-encoder

Encodes voice recordings as MP3. By default the SDK converts recordings to WAV, except on browsers that record audio/mp4, such as Safari, whose recordings it keeps as they are. With this encoder it converts those recordings to MP3 instead; audio/mp4 recordings still stay as they are. It has no stylesheet. Install the encoder package:

npm install @breezystack/lamejs

It exports one function, encodeToMp3(file: File, sampleRate: number): Promise<Blob>. It loads @breezystack/lamejs when it encodes the first recording. Pass it as the encoder of the composer's audio recordings:

import { MessageComposer } from "stream-chat-react";
import { encodeToMp3 } from "stream-chat-react/mp3-encoder";

export const VoiceMessageComposer = () => (
  <MessageComposer
    audioRecordingEnabled
    audioRecordingConfig={{ transcoderConfig: { encoder: encodeToMp3 } }}
  />
);

See Voice recordings and audio playback.

stream-chat-react/ai-components

Components for AI chat. Load ai-components.css after index.css. The packages these components use, such as react-markdown, react-syntax-highlighter and chart.js, come with stream-chat-react, so there's nothing else to install. The Chart.js renderer loads only when a message contains a chart.

• AIMessageComposer: a composer with attachments, speech to text and model selection. Its parts are AIMessageComposer.FileInput, .TextInput, .SpeechToTextButton, .SubmitButton, .ModelSelect and .AttachmentPreview.
• AIMarkdown: renders Markdown with syntax highlighting and charts.
• StreamingMessage: shows text as it streams in, with a typewriter effect.
• AIStateIndicator: an animated "thinking" indicator with an optional text.
• Hooks: useAIMessageComposerContext, useAttachments, useText, useIsDisabled and useSpeechToText.

Two components share a name. AIStateIndicator from stream-chat-react shows the AI state of a channel. AIStateIndicator from stream-chat-react/ai-components is the presentational indicator above. useMessageTextStreaming is exported from stream-chat-react, not from here.

See the AI integrations overview and the AI hooks reference.

CSS files

The package ships compiled CSS only, no SCSS sources. Every file is in stream-chat-react/dist/css/. The same files are also exported as stream-chat-react/css/<file>.

For example, an app with channel details and the emoji picker loads:

import "stream-chat-react/dist/css/index.css";
import "stream-chat-react/dist/css/channel-detail.css";
import "stream-chat-react/dist/css/emoji-picker.css";

A few details:

• The flag font. emoji-replacement.css loads its fonts from dist/css/assets/, next to it. The class it needs is added to each Channel and to ChannelNavigation's root, so the font applies inside them, and only on Windows when useImageFlagEmojisOnWindows is set.
• Variables. index.css declares the theming variables the other stylesheets use. ai-components.css also works outside .str-chat, with fixed fallback colors.
• Tree-shaking. The package marks *.css files as side effects, so bundlers keep your stylesheet imports.

CSS layers and import order

The SDK's stylesheets are unlayered, with one exception: index.css puts its small reset (box sizing and form control fonts inside .str-chat) in a layer named minimal-normalize. For a full reset, load modern-normalize, an optional peer of the package, in its own layer.

Load index.css first, then the stylesheets of the optional parts, then your overrides. To keep your overrides winning without !important, import the SDK's stylesheets into layers and declare the order once:

@layer modern-normalize, stream, stream-plugins, stream-overrides;

@import "modern-normalize" layer(modern-normalize);
@import "stream-chat-react/dist/css/index.css" layer(stream);
@import "stream-chat-react/dist/css/channel-detail.css" layer(stream-plugins);
@import "stream-chat-react/dist/css/emoji-picker.css" layer(stream-plugins);

@layer stream-overrides {
  .str-chat {
    --str-chat__accent-primary: #6d28d9;
  }
}

Unlayered CSS beats every layer. If you import the SDK's stylesheets without a layer, a layered override loses to them; put your overrides unlayered too, after the imports. See Theming for more.

Optional packages

stream-chat-react needs stream-chat 10.0.0-rc.20 or later, and React and React DOM 17, 18 or 19. These packages are optional peers. Install one only if you use the part that needs it.