Chat UIKit React v3
Chat UIKit React
Chat UIKit
Version 3

Send your first message

Copy link

Sendbird UIKit for React is a set of prebuilt UI components that allows you to easily craft an in-app chat with all the essential messaging features. Our development kit includes light and dark themes, fonts, colors and more. You can customize these components to create an interactive messaging interface unique to your brand identity.

Sendbird UIKit supports both open channels and group channels. Follow the guide below to start sending a message from scratch with React. This library isn't designed to work with other frameworks such as Vue or Angular.


Copy link

The dependencies for UIKit for React are:

  • react 16.8.6 or higher
  • react-dom 16.8.6 or higher

Supported browsers

Copy link
BrowserSupported versions

Internet Explorer

Not supported


13 or higher


All modern versions


All modern versions


11 or higher

Before you start

Copy link

In this quickstart guide, you will be installing Sendbird SDK, implementing codes to create a open channel with a user, and send a message within a few minutes. Before you start, you need to have the following:

Create a Sendbird application from dashboard

Copy link

A Sendbird application comprises everything required in a chat service including users, messages, and channels. You need the Application ID of your Sendbird application from the dashboard when initializing the Chat SDK.

  1. Go to Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.

  2. Create a new application by clicking Create + at the bottom right of your screen.

  3. Enter a name for your application. Choose a Product Type and Region. Then, click Confirm.

  4. Click the application you just created under Applications. You will see the application's Application ID which you will need when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

Create a user in the Sendbird application

Copy link

In order to send a message, you need a user in a channel. You can either create a user on the Sendbird dashboard first or you can use a new unique ID that hasn’t been taken by any of your Sendbird application users. In the latter case, a new user is automatically created in your Sendbird application before being connected.

In this guide, we will create a user on the Sendbird dashboard first.

  1. Go to the Users menu on the left-hand side of the dashboard and click Create user+.

  2. Enter the User ID and Nickname. It is recommended that you check the box next to Issue access token for user authentication. Then, click Create.

Note: Sendbird supports user authentication through access token for stronger security. However, on the dashboard, you can also configure the token permission in Settings > Application > Security > Access token permission to allow users without a token to access our functionalities.

  1. Copy and store the user ID. You will use it to connect to the Sendbird server.

Get started

Copy link

You can start building a modern messaging experience in your app by first installing Sendbird UIKit. This developer kit is an add-on feature to Sendbird Chat SDK so installing it will also install the core Chat SDK.

Step 1 Install UIKit

Copy link

You can install UIKit for React through npm or yarn. The minimum requirements listed above must be installed on your system. Enter the following code on the command line.

npm i @sendbird/uikit-react

Step 2 Implement UIKit to your web app

Copy link

Once you're done installing Sendbird UIKit, you can now implement it to your web app by using the App component. The App component is a group of essential UI components needed to build a functioning chat interface. You can also use our core components to your web app if you wish to make the interface more tailored to your needs.

Here, you will need to specify a few properties such as appId and userId in the App component.

  • appId: you can find this on the Overview page on Sendbird Dashboard.

  • userId: the unique ID set to the user you've created on the dashboard. If you haven't created a user in advance, specifying a unique userId in the code snippet provided will automatically generate a new user in the specified Sendbird application and connect it to the Sendbird server.

Note: Sendbird supports user authentication via access tokens, but defaults to allowing access without a token for ease of initial use. For enhanced security, we recommend adjusting the access settings of new users under Settings > Application > Security > Access token permission on the dashboard.

Add the following pattern to your app.jsx file to use the App component:

import { App as SendbirdApp } from '@sendbird/uikit-react';
import '@sendbird/uikit-react/dist/index.css';

function App() {
  return (
    // The chat interface can expand up to the dimensions of your parent component.
    // To achieve a full-screen mode, apply the following CSS rules to the parent element.
    <div style={{ width:'100vw', height:'100vh' }}>
        // You can find your Sendbird application ID on the Sendbird dashboard. 
        // Specify the user ID you've created on the dashboard.
        // Or you can create a user by specifying a unique userId.  

export default App;

Step 3 Send your first message

Copy link

You can now run the app to send a message. First, create a group channel by clicking on the icon in the top-left corner. Then, you can select users you wish to invite as members to your channel. Once the channel has been created, enter your first message and send.

You've successfully sent your first message with Sendbird.

UIKit with SSR frameworks

Copy link

You can use UIKit with SSR frameworks such as Gatsby or NextJS by importing it dynamically on the client side. These frameworks support the following plug-in and workflow:

You may refer to NextJS' sample for better understanding. You will need your own Sendbird application ID and user ID to use the sample.

The App component is a collection of all UIKit components needed to quickly implement a basic chat, and only requires the app ID and user ID to be configured.

List of properties

Copy link



The APP_ID of the Sendbird application.



The unique ID of the user.




An opaque string that identifies the user. It is recommended that every user has their own access token and provides it upon login for security. (Default: null)



A style applied to the app. Available themes are light and dark. (Default: light)



The user's nickname. (Default: null)



The URL of the user's profile image. (Default: null)



The query factory class to retrieve a list of custom users. (Default: Chat SDK's ApplicationUserListQuery)



The set of strings for UIKit components. This can override the default language. (Default: null)



The set of colors used in the UIKit themes. This can overrides the default theme. (Default: null)



Determines whether to allow the user to edit their profile. (Default: false)



Determines whether to display the profile preview section when the avatar is selected. If set to true, the profile preview section is not shown. (Default: false)



Determines whether to show the search icon in the channel title. (Default: false)



Specifies the prop to direct users to view either the parent message or the thread when they click on a reply button in the group channel module. Acceptable values are: PARENT and THREAD.

// Create a chat application.
import SendbirdApp from '@sendbird/uikit-react/App';

const MyApp = () => {


Copy link

Explore the components of Sendbird UIKit for React through our Storybook. This platform allows you to view and interact with various UI components, helping you understand how to integrate and customize them within your application.