The React Chat Messaging Component Library includes everything you need to build a fully functioning chat user experience in React with support for rich messages, reactions, threads, image uploads and videos. Get started with the React Chat tutorial.

React Social Chat Messaging

React Social Chat Messaging

Build feature rich chat messaging into your app with a familiar social style that will remind you of iMessage, Facebook or Whatsapp. Try the demo.

React Team Chat

React Team Chat

Building an app for your team? Need chat as a feature to support other team functionality? Stream’s Team Chat UI is drop-in ready for your project. Try the demo.

Ready-To-Use React Components

  • Message list
  • Message input
  • Channel list
  • Channel header
  • Threads

Channel List

  • Load channels on demand
  • Last message previews
  • Automatic channel sorting
  • Channel search

Message List

  • UI Virtualization
  • Date separators
  • Group messages by user
  • Threading and replies
  • Soft deleted messages

Message Component

  • Avatar
  • Timestamp
  • Reactions
  • Message actions
  • Mentions
  • Markdown support
  • Message editing

Message Input

  • Slash commands support
  • Emoji picker and autocomplete
  • File uploads
  • Image upload previews
  • Autocomplete mentions

Attachments

  • URL previews
  • Giphies
  • Images/image galleries
  • Video attachment player
  • Video links player

Extensible and Customizable

  • Customize with CSS variables
  • Custom component props
  • Custom React hooks

Compliant

  • I18n with with 10+ translations
  • ARIA attributes

Flexibility & Reusability

Focused on the best practices for component reusability and customization.

We've worked hard to avoid bloating our SDK components with too much logic. If one of our React components begins to handle a lot of logic, we split it out into two components. We manage this by splitting the first component into a top-level, which will handle all logic needed and then a lower-level component for handling the component rendering. Splitting the components out into two levels makes rendering easier and more efficient for customization. Take the style of our components exactly where you want with baked-in support for SCSS.

Performance

Chat is active, so we've included ways to pay attention to performance with PureComponent.

Internationalisation

Streami18n allows for built-in translations for components across multiple languages.

Meet The React Team

Next Steps

Start your 30-Day Chat trial to try out all our Chat product has to offer. No commitment or credit card required. If you want a custom plan or have questions, we are eager to talk with you.

Activity Feeds

Build any kind of feed without the headache of scalability or reliability of your feeds.

Learn more →
Enterprise

99.999% Uptime SLA, Industry leading compliance and security best practices.

Learn more →