Benefits
Some of the benefits include:- Faster prototyping – drop in ready-made components and see a working chat UI within minutes
- Shorter time to market – concentrate on product-specific features instead of rebuilding common chat patterns
- Tried and tested – rely on components that are already fully covered by a suite of tests
- Chat-centric design – layouts, interactions, and accessibility are built with chat workflows in mind
Components and Providers
The React UI Kit is organized into two main categories:- Components - UI components for building chat interfaces
- Providers and their Hooks - Context providers and hooks for managing state
Key Components
The kit includes the following key components:- ChatWindow - A complete chat interface for a room, including message display, input, and custom header/footer content
- ChatMessageList - Displays a list of chat messages with advanced scrolling functionality
- ChatMessage - Displays an individual chat message with interactive capabilities
- MessageInput - A text input interface for composing and sending chat messages
- Avatar - Displays a user or room avatar with fallback to initials
- Sidebar - Provides room navigation and management
- ParticipantList - Displays a list of room participants
- App - A complete, ready-to-use chat application
Key Providers
The kit includes the following providers:- ThemeProvider - Manages theme state, persistence, and system theme integration
- AvatarProvider - Manages avatar data for users and rooms
- ChatSettingsProvider - Manages global and room-level chat settings
Installation
Install the React UI Kit:Basic Usage
Next Steps
- Learn more about the available Components
- Explore the Providers and Hooks for managing state
- Check out the getting started guide for using Ably Chat with React UI Components