ably · splindsay-92 · Oct 23, 2025 · Oct 21, 2025
diff --git a/examples/chat-ui-app/react/README.md b/examples/chat-ui-app/react/README.md
@@ -1,12 +1,12 @@
-# Ably Chat UI React Components Example
+# Ably Chat UI React Kit Example
 
-This example demonstrates how to use the Ably Chat UI React Components to quickly build a full-featured chat application with minimal code.
+This example demonstrates how to use the Ably Chat UI React Kit to quickly build a full-featured chat application with minimal code.
 
 It showcases the use of the `App` component, which provides a complete chat interface with room management, message handling, and user interactions.
 
 ## Resources
 
-This example uses the `App` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers:
+This example uses the `App` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers:
 
 - `ThemeProvider`: Manages light/dark mode theming
 - `AvatarProvider`: Handles avatar generation and display

diff --git a/examples/chat-ui-app/react/src/App.tsx b/examples/chat-ui-app/react/src/App.tsx
@@ -6,8 +6,8 @@ import {
   ThemeProvider,
   AvatarProvider,
   ChatSettingsProvider,
-} from '@ably/chat-react-ui-components';
-import '@ably/chat-react-ui-components/dist/style.css';
+} from '@ably/chat-react-ui-kit';
+import '@ably/chat-react-ui-kit/dist/style.css';
 import 'minifaker/locales/en';
 import minifaker from 'minifaker';
 

diff --git a/examples/chat-ui-chat-window/react/README.md b/examples/chat-ui-chat-window/react/README.md
@@ -1,12 +1,12 @@
-# Ably Chat UI React Components - ChatWindow Example
+# Ably Chat UI React Kit - ChatWindow Example
 
-This example demonstrates how to use the `ChatWindow` component from the Ably Chat UI React Components library to build a focused chat interface for a single room.
+This example demonstrates how to use the `ChatWindow` component from the Ably Chat UI React Kit to build a focused chat interface for a single room.
 
 The `ChatWindow` component provides the main chat interface for a room, including message display, input, and custom header/footer content.
 
 ## Resources
 
-This example uses the `ChatWindow` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers:
+This example uses the `ChatWindow` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers:
 
 - `ThemeProvider`: Manages light/dark mode theming
 - `AvatarProvider`: Handles avatar generation and display

diff --git a/examples/chat-ui-chat-window/react/src/App.tsx b/examples/chat-ui-chat-window/react/src/App.tsx
@@ -7,8 +7,8 @@ import {
   ThemeProvider,
   AvatarProvider,
   ChatSettingsProvider,
-} from '@ably/chat-react-ui-components';
-import '@ably/chat-react-ui-components/dist/style.css';
+} from '@ably/chat-react-ui-kit';
+import '@ably/chat-react-ui-kit/dist/style.css';
 import 'minifaker/locales/en';
 import minifaker from 'minifaker';
 

diff --git a/examples/chat-ui-sidebar/react/README.md b/examples/chat-ui-sidebar/react/README.md
@@ -1,12 +1,12 @@
-# Ably Chat UI React Components - Sidebar Example
+# Ably Chat UI React Kit - Sidebar Example
 
-This example demonstrates how to use the `Sidebar` component from the Ably Chat UI React Components library to build a chat application with room navigation and management.
+This example demonstrates how to use the `Sidebar` component from the Ably Chat UI React Kit to build a chat application with room navigation and management.
 
 The `Sidebar` component provides room navigation and management functionality, allowing users to create, join, and leave rooms, as well as toggle between them.
 
 ## Resources
 
-This example uses the `Sidebar` component from the Ably Chat UI React Components library, and is wrapped with the necessary providers:
+This example uses the `Sidebar` component from the Ably Chat UI React Kit, and is wrapped with the necessary providers:
 
 - `ThemeProvider`: Manages light/dark mode theming
 - `AvatarProvider`: Handles avatar generation and display

diff --git a/examples/chat-ui-sidebar/react/src/App.tsx b/examples/chat-ui-sidebar/react/src/App.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react';
 import * as Ably from 'ably';
 import { ChatClient, RoomOptions } from '@ably/chat';
 import { ChatClientProvider } from '@ably/chat/react';
-import { AvatarProvider, ChatSettingsProvider, Sidebar, ThemeProvider } from '@ably/chat-react-ui-components';
-import '@ably/chat-react-ui-components/dist/style.css';
+import { AvatarProvider, ChatSettingsProvider, Sidebar, ThemeProvider } from '@ably/chat-react-ui-kit';
+import '@ably/chat-react-ui-kit/dist/style.css';
 import 'minifaker/locales/en';
 import minifaker from 'minifaker';
 

diff --git a/examples/package.json b/examples/package.json
@@ -102,10 +102,10 @@
     "spaces-member-location-react": "yarn workspace spaces-member-location-react dev"
   },
   "dependencies": {
-    "@ably/chat": "^0.14.0",
-    "@ably/chat-react-ui-components": "^0.1.2",
+    "@ably/chat": "^0.15.0",
+    "@ably/chat-react-ui-kit": "^0.1.3",
     "@ably/spaces": "^0.4.0",
-    "ably": "^2.13.0",
+    "ably": "^2.14.0",
     "cors": "^2.8.5",
     "franken-ui": "^2.0.0",
     "minifaker": "^1.34.1",

diff --git a/examples/yarn.lock b/examples/yarn.lock
@@ -2,17 +2,17 @@
 # yarn lockfile v1
 
 
-"@ably/chat-react-ui-components@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@ably/chat-react-ui-components/-/chat-react-ui-components-0.1.2.tgz#692919b0d1e66a0b6267057918a4fd6f4354bd1d"
-  integrity sha512-WEEFburLyNieOb3Fvu/KXO1h/M93cUiAo8hsp3EoJOT1y0rFcVLdnDKDm+BPIHCT0PIVMr1sWZJQ9anuqT0y6A==
+"@ably/chat-react-ui-kit@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@ably/chat-react-ui-kit/-/chat-react-ui-kit-0.1.3.tgz#332d4db49d08b68702d33e9afea71384b11769c4"
+  integrity sha512-GjwFS5j5/HKRm2LKqZedrBQKM8f+uzflIS3sy7Lkh0lzcWLm1u6FZSISg4ssRWIPVqFnY3lNAEc5Nl9EQzrJng==
   dependencies:
     clsx "^2.1.1"
 
-"@ably/chat@^0.14.0":
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.14.1.tgz#a547e84d5ebb05b8a64765d264a3440cfc2d8ad7"
-  integrity sha512-hCKTpHMePvJ98vYB/PM/PEa49iP3SYsgJ8KhbVEI/LP+nuWN2BaZui0YPfnLkWXh5eQf1Fb0d5sPhY7/x2kOww==
+"@ably/chat@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@ably/chat/-/chat-0.15.0.tgz#ec240b8931482aa27a4c46a36382a39634792e7e"
+  integrity sha512-iimOwma57EBUImjsOunNfAF2btx11UU97N0e6k9SXH+ySpcgAvmI98n2/CU0aS2Yi3UjeJDiaYRfAEDtk11NIg==
   dependencies:
     async-mutex "^0.5.0"
     dequal "^2.0.3"
@@ -780,7 +780,7 @@
     magic-string "^0.27.0"
     react-refresh "^0.14.0"
 
-ably@^2.13.0:
+ably@^2.14.0:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/ably/-/ably-2.14.0.tgz#257b762d6c5af27e42ad885e1e2fc650568ac3a3"
   integrity sha512-GWNza+URnh/W5IuoJX7nXJpQCs2Dxby6t5A20vL3PBqGIJceA94/1xje4HOZbqFtMEPkRVsYHBIEuQRWL+CuvQ==
@@ -2675,6 +2675,7 @@ statuses@2.0.1:
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==

diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
@@ -37,13 +37,13 @@ const UserIndicator = ({ user }: { user: string }) => {
 
 const getDependencies = (id: string, products: string[], activeLanguage: LanguageKey) => {
   return {
-    ably: '^2.13.0',
+    ably: '^2.14.0',
     nanoid: '^5.0.7',
     minifaker: '1.34.1',
     'franken-ui': '^2.0.0',
     ...(products.includes('auth') ? { cors: '^2.8.5' } : {}),
     ...(products.includes('chat')
-      ? { '@ably/chat': '^0.14.0', '@ably/chat-react-ui-components': '^0.1.2', clsx: '^2.1.1' }
+      ? { '@ably/chat': '^0.15.0', '@ably/chat-react-ui-kit': '^0.1.3', clsx: '^2.1.1' }
       : {}),
     ...(products.includes('spaces') ? { '@ably/spaces': '^0.4.0' } : {}),
     ...(id === 'spaces-component-locking' ? { 'usehooks-ts': '^3.1.0' } : {}),

diff --git a/src/data/examples/index.ts b/src/data/examples/index.ts
@@ -56,35 +56,35 @@ export const examples: Example[] = [
   {
     id: 'chat-ui-app',
     name: 'Chat App Component',
-    description: 'Use the Chat UI App component to quickly add a functionality app.',
+    description: `Use the Chat UI Kit's App component to quickly add a functionality app.`,
     products: ['chat'],
     languages: ['react'],
     layout: 'single-large',
     visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
-    metaTitle: `Build a chat app with Ably’s Chat UI App Component`,
-    metaDescription: `Quickly add chat functionality to your React app with Ably’s Chat UI App Component. Build realtime chat interfaces with minimal setup and maximum reliability.`,
+    metaTitle: `Build a chat app with Ably’s Chat UI Kit's App Component`,
+    metaDescription: `Quickly add chat functionality to your React app with Ably’s Chat UI Kit's App Component. Build realtime chat interfaces with minimal setup and maximum reliability.`,
   },
   {
     id: 'chat-ui-chat-window',
     name: 'Chat Window Component',
-    description: 'Use the Chat UI Chat Window component to add a realtime chat window to your app.',
+    description: `Use the Chat UI Kit's Chat Window component to add a realtime chat window to your app.`,
     products: ['chat'],
     languages: ['react'],
     layout: 'single-large',
     visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
-    metaTitle: `Add a chat window with Ably’s Chat UI Chat Window Component`,
-    metaDescription: `Easily integrate a chat window into your React app with Ably’s Chat UI Chat Window Component. Enable realtime messaging with minimal code and high reliability.`,
+    metaTitle: `Add a chat window with Ably’s Chat UI Kit's Chat Window Component`,
+    metaDescription: `Easily integrate a chat window into your React app with Ably’s Chat UI Kit Chat Window Component. Enable realtime messaging with minimal code and high reliability.`,
   },
   {
     id: 'chat-ui-sidebar',
     name: 'Chat Sidebar Component',
-    description: 'Use the Chat UI Sidebar component to add a sidebar for managing chat rooms.',
+    description: `Use the Chat UI Kit's Sidebar component to add a sidebar for managing chat rooms.`,
     products: ['chat'],
     languages: ['react'],
     layout: 'single-vertical',
     visibleFiles: ['src/script.ts', 'App.tsx', 'index.tsx'],
-    metaTitle: `Add a chat sidebar with Ably’s Chat UI Sidebar Component`,
-    metaDescription: `Integrate a chat sidebar into your React app with Ably’s Chat UI Sidebar Component. Manage chat rooms and user presence with ease and reliability.`,
+    metaTitle: `Add a chat sidebar with Ably’s Chat UI Kit's Sidebar Component`,
+    metaDescription: `Integrate a chat sidebar into your React app with Ably’s Chat UI Kit's Sidebar Component. Manage chat rooms and user presence with ease and reliability.`,
   },
   {
     id: 'liveobjects-live-counter',

diff --git a/src/data/languages/languageData.ts b/src/data/languages/languageData.ts
@@ -24,8 +24,8 @@ export default {
     laravel: '1.0',
   },
   chat: {
-    javascript: '0.14',
-    react: '0.14',
+    javascript: '0.15',
+    react: '0.15',
     swift: '0.9',
     kotlin: '0.8',
   },

diff --git a/src/pages/docs/chat/getting-started/react-ui-kit.mdx b/src/pages/docs/chat/getting-started/react-ui-kit.mdx
@@ -27,7 +27,7 @@ You'll create Ably clients, install the UI component package, and build a comple
   ```
 </Code>
 
-2. (Optional) Add Tailwind CSS if you want utility classes elsewhere in your app. The UI kit itself ships pre-compiled CSS, so Tailwind isn't required:
+2. (Optional) Add Tailwind CSS if you want utility classes elsewhere in your app. The UI Kit itself ships pre-compiled CSS, so Tailwind isn't required:
 
 <Code>
   ```shell
@@ -38,7 +38,7 @@ You'll create Ably clients, install the UI component package, and build a comple
 
 Follow the Tailwind Vite guide to configure the generated files.
 
-3. Install the Chat UI kit and its peers:
+3. Install the Chat UI Kit and its peers:
 
 <Code>
   ```shell

diff --git a/src/pages/docs/chat/index.mdx b/src/pages/docs/chat/index.mdx
@@ -11,7 +11,7 @@ The Chat SDK contains a set of purpose-built APIs that abstract away the complex
 
 * [Getting started: Chat in JavaScript / TypeScript](/docs/chat/getting-started/javascript)
 * [Getting started: Chat in React](/docs/chat/getting-started/react)
-* [Getting started: Chat UI Kits in React](/docs/chat/getting-started/react-ui-components)
+* [Getting started: Chat UI Kit in React](/docs/chat/getting-started/react-ui-kit)
 * [Getting started: Chat in React Native](/docs/chat/getting-started/react-native)
 * [Getting started: Chat in Android](/docs/chat/getting-started/android)
 * [Getting started: Chat in Kotlin (JVM)](/docs/chat/getting-started/jvm)
@@ -27,7 +27,7 @@ Ably Chat provides the following key features:
 * [Typing indicators](#typing)
 * [Room reactions](#reactions)
 * [AI Moderation](#moderation)
-* [React UI Kits](#react-ui-kits)
+* [React UI Kit](#react-ui-kit)
 * [React Hooks](#react-hooks)
 
 ### Rooms and messages <a id="rooms"/>
@@ -60,11 +60,11 @@ Each room can represent a 1:1 chat between an agent and a customer, a private me
 
 You can integrate seamlessly in minutes with a number of third-party moderation providers to take advantage of powerful AI models, or bring your own infrastructure via integrations with the likes of AWS Lambda to customize your experience.
 
-### React UI Kits <a id="react-ui-kits"/>
+### React UI Kit <a id="react-ui-kit"/>
 
-[React UI Kits](/docs/chat/getting-started/react-ui-components) provide pre-built, customizable React components that make it even faster to add chat functionality to your applications. These components handle the presentation layer and user interactions, allowing you to focus on your application logic rather than building chat UI from scratch.
+[React UI Kit](/docs/chat/getting-started/react-ui-kit) provide pre-built, customizable React components that make it even faster to add chat functionality to your applications. These components handle the presentation layer and user interactions, allowing you to focus on your application logic rather than building chat UI from scratch.
 
-The UI Kits include components for message lists, input fields, user avatars, typing indicators, and more. They're designed to be flexible and themeable to match your application's design system. They are fully [open-source](https://github.com/ably/ably-chat-react-ui-components), so you can easily take the code as a starting point to further customize your own components.
+The UI Kit includes components for message lists, input fields, user avatars, typing indicators, and more. They're designed to be flexible and themeable to match your application's design system. They are fully [open-source](https://github.com/ably/ably-chat-react-ui-kit), so you can easily take the code as a starting point to further customize your own components.
 
 ### React Hooks <a id="react-hooks"/>
 
@@ -77,7 +77,7 @@ Take a look at a [livestream basketball game](https://ably-livestream-chat-demo.
 ## Next steps <a id="next"/>
 
 * Read the [JavaScript / TypeScript getting started guide](/docs/chat/getting-started/javascript)
-* Read the [React UI Kits getting started guide](/docs/chat/getting-started/javascript)
+* Read the [React UI Kit getting started guide](/docs/chat/getting-started/react-ui-kit)
 * Read more about using [rooms](/docs/chat/rooms) and sending [messages](/docs/chat/rooms/messages).
 * Read into pulling messages from [history](/docs/chat/rooms/history) and providing context to new joiners.
 * Learn about how to add [chat moderation](/docs/chat/moderation).

diff --git a/src/pages/docs/chat/react-ui-kit/component-styling.mdx b/src/pages/docs/chat/react-ui-kit/component-styling.mdx
@@ -10,7 +10,7 @@ This guide explains how to style and customize the appearance of components in t
 
 ## Basic Styling Approach <a id="basic-styling-approach"/>
 
-The Ably Chat React UI kit uses Tailwind CSS for styling components, this gives you a utility-first approach to styling, allowing you to apply styles directly in your JSX using Tailwind's utility classes.
+The Ably Chat React UI Kit uses Tailwind CSS for styling components, this gives you a utility-first approach to styling, allowing you to apply styles directly in your JSX using Tailwind's utility classes.
 This approach is designed to be straightforward to use, but does limit the ability to override styles at a granular level.
 
 ### CSS Import <a id="css-import"/>