Overview

Stream Chat React is a component library built on the Stream Chat API. It provides a set of performant, customizable React components for common chat experiences such as team and social messaging, virtual events, livestreaming, and customer support.

Key features include:

• Rich media messages
• Reactions
• Threads and quoted replies
• Text input commands (ex: Giphy and @mentions)
• Image and file uploads
• Video playback
• Audio recording
• Read state and typing indicators
• Channel and message lists

Best Practices

• Start with the official tutorial to align on recommended structure before customizing UI.
• Treat the component library as the default source of truth and only replace parts that need bespoke UX.
• Use built-in features (threads, reactions, uploads, indicators) before building custom equivalents.
• Keep customization scoped to theming and component overrides to stay compatible with updates.
• Validate your target browsers against the supported list to avoid unexpected UI issues.

What's New In v14

Version 14 is a major refresh of Stream Chat React, with a focus on a more modern default UI, a more cohesive design system, and a cleaner customization story for teams building production chat experiences.

Modern Redesign

The default React chat experience has been redesigned across the most visible parts of the product:

• channel list and preview rows
• message layout and metadata
• reactions and message actions
• composer, attachment, and thread flows
• dialogs, notifications, and navigation surfaces

The result is a UI that feels more polished out of the box and needs less custom work to look production-ready.

New Design System

v14 brings a more consistent visual and structural system across the SDK. Styling patterns, component structure, and theming hooks are more aligned, which makes it easier to apply a coherent brand style without patching one-off component differences.

This is especially useful for teams that want:

• cleaner theming with CSS variables and component-level styling hooks
• more predictable behavior across chat surfaces
• better consistency with Stream's newer cross-platform UI direction

UX Improvements

Many of the default interaction patterns have been refined to feel more modern and more intentional:

• MessageComposer has been significantly redesigned, giving the input area a cleaner structure and a more cohesive experience for attachments, link previews, quoting, commands, cooldowns, and voice recordings.
• Composer-adjacent surfaces such as attachment selection, previews, and send flows now feel more integrated instead of behaving like loosely connected features.
• Redesigned MessageActions give the message UI a cleaner, more focused interaction model for common actions such as reactions, replies, edits, and moderation flows.
• Search is now better integrated into the SDK's main component model, making the discovery experience feel more like a first-class part of chat rather than a bolt-on surface.
• Notifications, unread indicators, and scroll-to-latest affordances have been cleaned up so busy conversations are easier to follow.
• Typing indicators now feel more intentional across both the message list and header surfaces, which gives channels and threads a clearer sense of live activity.
• Attachment and gallery flows have been redesigned to reduce visual clutter and make media-heavy conversations easier to scan and interact with.
• Channel previews, thread views, and surrounding navigation surfaces have been polished to create a stronger sense of hierarchy and a more consistent browsing experience.

These changes help new integrations ship faster, while giving existing customers a better foundation to evolve their product UX.

Better Developer Experience

v14 also improves the way the SDK is customized.

• WithComponents and ComponentContext provide clearer override points for SDK-owned UI
• exported hooks and building blocks make it easier to compose custom message, preview, input, and attachment experiences
• the docs and component structure are better aligned around the current override model, which reduces guesswork when replacing default UI

If you are starting fresh, v14 gives you a stronger out-of-the-box experience. If you are upgrading, it gives you a more maintainable foundation for long-term theming, customization, and product iteration.

Where to Get Started

If you’re new, start with the tutorial, then move on to the getting started guide.

Architecture

The SDK is built around React context providers and hooks. You can use the exported hooks (for example, useChatContext and useChannelStateContext) in your own components to read state and trigger actions while staying subscribed to updates.

Supported Platforms

Our React Chat SDK can run on all modern browsers and platforms released after April 2024. Here is the list of supported platforms:

• Chrome 124+
• Firefox 124+
• Edge 124+
• Safari and Mobile Safari 17.4+