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

Start here

Build with Stream CLI and Agent Skills

The Stream CLI and Agent Skills provide AI coding agents, such as Claude Code, Cursor, and Codex, with the tools and knowledge necessary to build apps with Stream.

Install the CLI and add the skills to your project:

curl -fsSL https://getstream.io/cli.sh | bash
getstream skills stream-react

Once installed, invoke it from your agent:

/stream Add Stream Chat to my React app.

The /stream skill acts as a router, reading your request and dispatching it to the specialist skill. You can also invoke the /stream-react skill directly.

Stream Agent Skills can also be installed from skills.sh.

Best practices

• 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.
• Check your target browsers are on 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.

Architecture

The SDK is built around React context providers and hooks. The components from stream-chat-react render on top of the low-level stream-chat client, which manages the connection, state and API calls. 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.

flowchart LR
  app[Your app] --> components[stream-chat-react components]
  app -. custom UI .-> client
  components --> client[stream-chat client]
  client <--> api[Stream API]

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+

What's next