Skip to content
Switch branches/tags

react-chat-ui logo

πŸ™Š react-chat-ui

A library of React components for building chat UI's.



Sponsored by Pusher Chatkit:

Pusher Chatkit


  • Auto scroll to bottom
  • SUPER easy to use
  • Multiple user grouping (try it out in the demo)

Keep in mind that this project is still in the early stages of development. If you encounter a bug or have a feature request, please create an issue and/or tweet at me here.


npm install react-chat-ui --save

Basic Usage

import { ChatFeed, Message } from 'react-chat-ui'

// Your code stuff...

render() {

  return (

    // Your JSX...

      messages={this.state.messages} // Array: list of message objects
      isTyping={this.state.is_typing} // Boolean: is the recipient typing
      hasInputField={false} // Boolean: use our input, or use your own
      showSenderName // show the name of the user who sent the message
      bubblesCentered={false} //Boolean should the bubbles be centered in the feed?
      // JSON: Custom bubble styles
          text: {
            fontSize: 30
          chatbubble: {
            borderRadius: 70,
            padding: 40

    // Your JSX...



Make sure to keep a list of proper message objects in your class state. Like so:

this.state = {
  messages: [
    new Message({
      id: 1,
      message: "I'm the recipient! (The person you're talking to)",
    }), // Gray bubble
    new Message({ id: 0, message: "I'm you -- the blue bubble!" }), // Blue bubble


Contributing!Β‘1 πŸ”§

Contributions are always welcomed and encouraged. If you don't want to write a feature request yourself, let ya boi know (either on Twitter or by creating a Pull Request) and I'll get that shit coded right up.


  • documentation
  • documentation
  • documentation


yarn dev