Build chat with PubNub Chat Components
Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.
PubNub Chat Components are ready-made building blocks you can use to either create web and mobile chat apps from scratch or add chat features to your existing applications.
Sign up
Don't feel like leaving this page to sign up?
Get started
Try out our PubNub Chat Components for React (JavaScript) and React Native (TypeScript). Run a sample chat app and send your first message.
Demos
Play with interactive chat demos.
Sample apps
View GitHub sources of sample chat apps built with PubNub Chat Components.
Tutorials
Read how to use chat components to build chat applications.
React
- Set up and use PubNub Chat Components for React to build a chat in an existing app
- Analyze a sample app that uses PubNub Chat Components for React
- Integrate PubNub Chat Components for React in a chat app
- Customize PubNub Chat Components for React
- Build a cross-platform Digital Health chat app
Components
PubNub provides a few in-house components that supply both the UI for your chat apps (so-called "UI Components") and the back-end communication handled by PubNub (so-called "Data Components").
| Component | Description | Links |
|---|---|---|
| Chat Provider | Top-level component that sets up default chat configuration | |
| Channel list | List of channels that represent chat rooms in the application | |
| Member list | List of users with properties like names, titles, or avatars | |
| Message list | Paginated list of messages with sender details | |
| Message input | Field to send messages and emojis in chat rooms |
Features
PubNub Chat Components provide a number of features you can enable in your chat apps, such as typing indicators, tracking user's online/offline status, viewing historical messages or adding reactions to messages.
| Feature | Description | Related component | Links |
|---|---|---|---|
| Theming | Default themes you can customize | All | |
| Typing indicator | Notifications that show users are typing | Message Input | |
| User presence | List of users currently present on the channel | Custom hook | |
| Message history | Messages you can fetch from Message Persistence and display on a channel | Message List | |
| File upload | Share and download images or any other data files | Message Input | |
| Message reactions | Emojis you can add to messages | Message List |