@ably/chat-react-ui-kit
v0.3.0
Published
A library of configurable components for use with @ably/chat
Maintainers
Keywords
Readme

Ably Chat React UI Kit
A library of configurable UI components for building chat applications with the Ably Chat SDK. This package provides
ready-to-use React components that integrate seamlessly with @ably/chat to
handle real-time messaging, presence, typing indicators, and more.
Getting started
Everything you need to get started with Ably Chat React UI Kit:
- About Ably Chat.
- Getting started with Ably Chat in JavaScript.
- Getting started with Ably Chat in React.
- Getting started with Ably Chat React UI Kit.
- Play with the livestream chat demo.
Installation
npm install @ably/chat-react-ui-kit @ably/chat react react-domSupported Platforms
This SDK supports the following platforms:
| Platform | Support | |--------------|------------------------------------------------------------------------------------------------------------| | Browsers | All major desktop browsers, including Chrome, Firefox, Edge and Opera. Internet Explorer is not supported. | | Node.js | Version 20 or newer. | | TypeScript | Fully supported, the library is written in TypeScript. | | React | Version 18 or newer. Includes providers and hooks for deep integration with the React ecosystem. |
[!NOTE] The Chat UI Components SDK can be installed from NPM and requires the core Ably Chat SDK as a peer dependency.
Core Components
App Component
Full application component that provides a complete chat interface out of the box:
- Integrated sidebar for room navigation
- Chat area with message display and input
- Theme support (light/dark mode)
- Avatar management
ChatWindow
A comprehensive chat interface for individual rooms featuring:
- Message history with pagination
- Real-time message display
- Message editing and deletion
- Reactions support
- Typing indicators
Sidebar
A collapsible navigation component for managing multiple chat rooms:
- Room list with activity indicators
- Room creation and management
- Presence and occupancy display
- Theme toggle integration
Releases
The CHANGELOG.md contains details of the latest releases for this SDK. You can also view all Ably releases on changelog.ably.com.
Contribute
Read the MAINTAINERS.md guidelines to contribute to Ably or Share feedback or request a new feature.
Support and known issues
For help or technical support, visit Ably's support page. You can also view the community reported Github issues or raise one yourself.
