# Tencent RTC Chat — React > Chat documentation for React platform. ## UIKit ### Getting Started - [Activate the Service](https://pre.trtc.io/document/74511.md): Tencent Cloud Chat service is an instant messaging SDK that enables developers to integrate messaging and group management features. This guide helps users activate the free plan, retrieve UserSig for authentication, purchase official editions, renew subscriptions, upgrade plans, and enable automatic renewal. It provides step-by-step instructions to quickly start using Chat and manage your application versions effectively. - [Run Demo](https://pre.trtc.io/document/45912.md): The React Chat Demo Quickstart Guide provides developers with step-by-step instructions to quickly experience and integrate Tencent RTC's chat capabilities, including text, voice, and video messaging. It covers environment setup, obtaining necessary credentials, running the demo, and integrating chat-uikit-react into projects. This guide is designed for developers using React and related technologies to enable chat features efficiently. - [Integration](https://pre.trtc.io/document/50055.md): TUIKit is a UI component library built on the Chat SDK that enables developers to quickly implement chat, session, search, and group features through React components. This quickstart guide walks through the prerequisites, project creation, dependency installation, component integration, and sending the first message, helping developers rapidly build chat applications using React and TUIKit. - [Visual Integration（AppBuilder）](https://pre.trtc.io/document/72334.md): App Builder is a visual UI component system SDK designed to help developers efficiently build and debug applications by providing configurable basic and core UI components. This guide explains how to experience and configure custom ChatKit UI by exporting configuration files from App Builder and integrating them into your existing ChatKit project to achieve personalized UI styles. ### Features - [Calls Integration](https://pre.trtc.io/document/64468.md) - [Read Receipt](https://pre.trtc.io/document/72001.md): The React MessageList component is part of the Tencent RTC React UIKit, providing read receipt functionality for chat applications. It allows developers to detect if a message has been read by recipients in both one-on-one and group chats. This component is designed for React developers building interactive chat interfaces, enabling enhanced user communication awareness. - [Message Search](https://pre.trtc.io/document/72009.md): React Cloud Search SDK provides essential search capabilities for customer service, social, online education, medical consultation, and OA scenarios. It enables users to perform global and in-conversation searches for groups, users, and messages. This guide covers key integration steps to implement cloud search features, including global search and message search within specified sessions, enhancing user experience and engagement. - [Custom Message](https://pre.trtc.io/document/72002.md): Tencent Cloud Chat UIKit React SDK guide explains how to implement custom message types beyond the default text, image, voice, video, and file messages. This guide is designed for developers who want to extend chat functionality by adding business-specific custom messages, such as product purchase messages, including key data fields and rendering components. It provides step-by-step instructions and example code to send and display custom messages effectively. ### UI Components - [UIKitProvider](https://pre.trtc.io/document/72048.md): UIKitProvider is a React Context Provider SDK for global state management, including theme and internationalization, designed for React applications. It enables consistent style themes and multilingual support across the entire app by providing a uniform context to child components. This SDK supports theme switching between light and dark modes, custom language resources, and exposes a useUIKit hook for accessing and modifying the current theme and language settings. - [ConversationList](https://pre.trtc.io/document/64703.md): The ConversationList component in Tencent Cloud Chat UIKit React SDK provides a customizable conversation list UI with features including search, creation, pinning, deletion, filtering, and sorting. It supports flexible composition by allowing replacement of subcomponents such as Header, List, ConversationPreview, and more. This API reference details its props and usage for developers building chat interfaces. - [ConversationPreview](https://pre.trtc.io/document/64705.md): The ConversationPreview component API provides detailed properties and customization options for previewing session content within a conversation list. It is designed for developers building chat interfaces who need to display session information, unread counts, and conversation actions. This reference covers key props including conversation data, selection control, action configurations, and custom rendering slots, along with an example of implementing a Discord-like style using React and CSS. - [ConversationSearch](https://pre.trtc.io/document/64706.md): ConversationSearch is a component in the @tencentcloud/chat-uikit-react SDK that enables search functionality for users, groups, and messages. It is designed for developers building chat applications who need integrated search capabilities including a search bar, advanced search options, and customizable search result displays. The component supports various props for customization such as visibility, debounce timing, auto-focus, styling, and event callbacks for keyword changes, search completion, result selection, and error handling. - [ConversationActions](https://pre.trtc.io/document/64707.md): The ConversationActions component is part of the Tencent Cloud Chat UIKit and provides an API for managing conversation-specific actions such as deleting, pinning, and toggling Do Not Disturb mode. It supports customization through props and event handlers, enabling developers to tailor conversation action behaviors and UI within React applications. - [MessageList](https://pre.trtc.io/document/72085.md): MessageList is a chat message list component SDK that supports flexible message alignment, read receipt enabling, customizable message actions, message aggregation, and filtering. It is designed for developers building chat applications who need a highly customizable and interactive message display component with support for advanced features like message grouping and avatar display control. - [MessageInput](https://pre.trtc.io/document/72088.md): MessageInput React component is a versatile chat input SDK that enables text entry, emoji selection, file attachments, and message sending. It offers extensive customization through props for input behavior, toolbar actions, display modes, and component slots, supporting flexible integration in various chat scenarios. - [ChatSetting](https://pre.trtc.io/document/72094.md): ChatSetting is an intelligent chat settings component that belongs to the Tencent RTC chat UI kit. It is designed for developers integrating chat features to provide users with a unified and adaptive settings interface that automatically switches between one-on-one (C2C) and group chat modes based on the active session type. This component enhances user experience by dynamically updating settings content according to session status. - [Search](https://pre.trtc.io/document/72091.md): The Search component is a comprehensive search SDK designed for instant messaging, online meeting, and online education scenarios. It provides a full set of features including search bar, result display, and advanced search with multiple modes such as mini, standard, and embedded. This solution supports user, group, and message searches and requires the cloud search plugin from VAS. Developers can customize search result displays using SearchStore for tailored user experiences. - [ContactList](https://pre.trtc.io/document/72203.md): ContactList is a configurable contact list component SDK designed for instant messaging and social applications, supporting friend lists, group lists, blocklists, and application management. It offers core capabilities such as group collapsing, search filtering, and custom rendering. The ContactList and ContactInfo props provide extensive customization options including active contact management, search functionality, custom components, and user interaction callbacks to facilitate flexible contact management interfaces. ### Data States - [Login State](https://pre.trtc.io/document/72049.md): LoginState is a login state management SDK designed to handle login operations such as automatic login, manual login, logout, and real-time status monitoring. It helps developers efficiently manage user login status, handle errors, and prevent duplicate logins in applications using Tencent RTC. This overview explains the core features, parameters, return values, and usage examples for integrating LoginState into your project. - [ConversationList State](https://pre.trtc.io/document/64704.md): ConversationListStore is a core data access and structure layer within the Tencent Cloud Chat React SDK, designed to manage conversation list data and features such as unread message counts, conversation pinning, deletion, Do Not Disturb, and drafts. It is primarily accessed through useChatContext for lifecycle management including creation, subscription, and destruction, enabling developers to efficiently handle conversation list functionalities in UI layers. This API reference details the properties and methods of ConversationListStore for advanced usage scenarios requiring independent or specialized conversation list instances. - [Search State](https://pre.trtc.io/document/72092.md): SearchStore is a search SDK built on Cloud Search that enables developers to implement custom search scenarios including users, groups, group members, and messages. This quickstart guide demonstrates how to integrate SearchStore in a React environment to perform keyword-based user searches, handle pagination, and manage search state effectively. - [MessageList State](https://pre.trtc.io/document/72086.md): MessageListStore is a core SDK component in Tencent Cloud chat that provides a consistent interface and data management for message lists within conversations. It supports loading historical and newer messages, handling message states, read receipts, and synchronization, aimed at developers building chat interfaces. Typical usage is through useChatContext, while direct MessageListStore usage suits advanced custom scenarios. The page details its properties, methods, and demonstrates usage with pagination and message loading features. - [ContactList State](https://pre.trtc.io/document/72204.md): ContactStore is a contact data management SDK designed for chat applications, providing comprehensive features such as friend list handling, blacklist management, and friend application workflows. It enables developers to efficiently load, add, delete, and update contacts, manage friend requests, and synchronize blacklist status. This API reference details the properties and methods available in ContactStore, including usage examples integrating with GroupStore to build contact and group chat lists. ### Customization - [Chat Theming](https://pre.trtc.io/document/65299.md): UIKit React component library is a UI toolkit that offers a comprehensive theme system supporting seamless light and dark theme switching. It is designed for developers building React applications who need consistent and real-time theme updates with easy configuration. The library ensures a unified visual experience across your app with minimal setup. - [Localization](https://pre.trtc.io/document/62741.md): React UIKit is a multilingual UI component library that supports English, Japanese, Korean, Simplified Chinese, and Traditional Chinese language packs. It enables developers to specify or dynamically switch the interface display language using UIKitProvider and provides a useUIKit hook for accessing translation functions within the React context. This guide explains default supported languages, language specification, dynamic switching, and usage of language entries for seamless internationalization in React applications.