Build chat with PubNub Chat Components
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.
Get started
Try out our PubNub Chat Components for React (JavaScript), Android (Kotlin), and iOS (Swift). 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
Android
iOS
- Set up and use PubNub Chat Components for iOS to build a chat in an existing app
- Build a Swift chat app using PubNub Chat Components for iOS
Components
PubNub provides a few in-house components that supply both the UI for your chat apps (so-called "UI Components") and the backend 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 | Member List (for Android and iOS) and a custom hook in React | |
| Message history | Messages you can fetch from storage and display on a channel | Message List | |
| File uploads | Images or any other data files to send | Message Input | |
| Message reactions | Emojis you can add to messages | Message List | |
| Message menu | Actions you can perform on sent messages, such as copying |
Register for PubNub’s Chat Community
Get the most recent updates about PubNub’s newest chat features. By signing up, you’ll also receive:
- Free PubNub swag
- Exclusive Q&A sessions, workshops, and webinars with our engineers and product managers
- The opportunity to have your voice heard by influencing our chat roadmap