---
source_url: https://www.pubnub.com/docs/chat/components/overview
title: Build chat with PubNub Chat Components
updated_at: 2026-06-04T11:09:15.279Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Build chat with PubNub Chat Components

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

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.

* [React](https://www.pubnub.com/docs/chat/components/react)
* [React Native](https://www.pubnub.com/docs/chat/components/react-native)

## Demos

Play with interactive chat demos.

* [Group Chat](https://www.pubnub.com/demos/group-chat-react-demo/)
* [Digital Health Chat](https://www.pubnub.com/demos/telehealth/)
* [Live Audience Engagement Chat](https://www.pubnub.com/demos/virtual-events/)

## Sample apps

View GitHub sources of sample chat apps built with PubNub Chat Components.

* [React](https://github.com/pubnub/react-chat-components/tree/master/samples/react)
* [React Native](https://github.com/pubnub/react-chat-components/tree/master/samples/react-native)

## 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](https://www.pubnub.com/blog/react-chat-components-build-chat-experiences/)
* [Analyze a sample app that uses PubNub Chat Components for React](https://www.pubnub.com/blog/getting-started-reusing-react-chat-components-series/)
* [Integrate PubNub Chat Components for React in a chat app](https://www.pubnub.com/blog/integrating-components-reusing-react-chat-components-series/)
* [Customize PubNub Chat Components for React](https://www.pubnub.com/blog/customizing-chat-components-react-chat-components-series/)
* [Build a cross-platform Digital Health chat app](https://www.pubnub.com/tutorials/cross-platform-chat-application-telehealth-react/)

## 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 | React, React Native |
| **Channel list** | List of channels that represent chat rooms in the application | React, React Native |
| **Member list** | List of users with properties like names, titles, or avatars | React, React Native |
| **Message list** | Paginated list of messages with sender details | React, React Native |
| **Message input** | Field to send messages and emojis in chat rooms | React, React Native |

## 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 | React, React Native |
| **Typing indicator** | Notifications that show users are typing | Message Input | React, React Native |
| **User presence** | List of users currently present on the channel | Custom hook | React, React Native |
| **Message history** | Messages you can fetch from Message Persistence and display on a channel | Message List | React, React Native |
| **File upload** | Share and download images or any other data files | Message Input | React, React Native |
| **Message reactions** | Emojis you can add to messages | Message List | React, React Native |