React chat UI
React chat UI you can use right away
Discover a pre-built chat UI for React that supports three different highly customizable layouts. Mix and match layouts to suit your needs.
Suzi
10m ago
Hey guys, I'm thinking of ordering pizza for lunch. What would you like?
Frank
8m ago
Nice! I think I'll go with the trusty margherita, please! Can't go wrong 🍕🍕
Abigail
7m ago
Safe choice @Frank. I'll be bold and controversial and go for pineapple 🍍
Tyrone
2m ago
00:12
1x
Great! I'll order now!
Sara
10m ago
Hey team, I'm reviewing the budget for the next quarter and we have some available for training. You got any in mind?
Franco
8m ago
Nice! Yeah, there were a couple of React courses I wanted to do online.
Carli
7m ago
I wanted to find an interative design course. I'll do some research!
Denzel
2m ago
Cool. I'll also give it some thought.
Say something...
Inbox
The TalkJS Inbox for React shows the chat history on the left, selected conversation on the right. It's designed to act as the messaging center of your app, usually living on its own page.
Chatbox
The React Chatbox is just the right half of the Inbox UI mode. It takes up less space and is designed to be embedded in your app near an order confirmation, a booking, or user profile.
Popup
You can also show a conversation in a React popup that only shows up when the user clicks a button somewhere. When shown, the popup is positioned on the bottom right of your page.
Easily integrate a chat UI into your React app
You just need to tell us which conversation to display, who's chatting, and where to show it on the page. We take care of the rest! And if you want a deeper integration, we have all the APIs you'll need to add functionality or integrate into your own systems.
1import { Session, Chatbox } from "@talkjs/react";23<Session appId="t824ba8" userId="pete">4 <Chatbox conversation="workshop" className="chatbox"/>5</Session>
Tune the look and feel of your UI
It's easy to customize anything you'd prefer to change from the default TalkJS theme. Our built-in theme editor lets you control the style, layout, and even what data is displayed.
Ready to get started?
Build any chat use case into your product — in minutes — with just a few lines of code.