# ChatUI: Alibaba's React kit for conversation interfaces

> ChatUI is Alibaba's MIT-licensed UI design language and React component library for conversational interfaces, distilled from the Alime Chatbot experience, written in TypeScript with theming, internationalization in dozens of languages, accessibility certification, and a useMessages hook driving a Chat component with bubbles and typing states. The package is @chatui/core at version 3.7.0, installable from npm with a UMD bundle on CDNs, and the repository's last push was on 2026-03-30.

**alibaba/ChatUI** — The UI design language and React library for Conversational UI

- Repository: https://github.com/alibaba/ChatUI
- Website: https://chatui.io
- Stars: 4,447 · Forks: 427
- Language: TypeScript
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/alibaba-chatui

## A design language extracted from a production chatbot

ChatUI presents itself as the UI design language and React library for Conversational UI, and its authority claim is specific, the best practice for chat interaction based on our experience of Alime Chatbot, the assistant that gave Alibaba's e-commerce support their chat interactions at scale. That lineage matters for what the library encodes, the components are not a generic message-list toolkit but the patterns a high-volume production assistant settled on, bubbles, quick replies, typing indicators and input handling arranged the way a real deployment arranged them. The library is written in TypeScript with predictable static types, responsive design adapting to whatever device arrives, and both an English and a Simplified Chinese README, with the website at chatui.io carrying the documentation. The package publishes as @chatui/core, version 3.7.0 in the manifest, though the only tagged GitHub release is the 0.1.0 initial release of September 2020, versioning living on npm rather than the release page, and the last push came on 2026-03-30.

## One hook, one component, a working chat in a page

The usage example is a working chat in about thirty lines, and its shape teaches the model. The useMessages hook manages the conversation state, returning messages, appendMsg and setTyping, while the Chat component renders and a Bubble customizes message content:

```jsx
import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/dist/index.css';

const App = () => {
  const { messages, appendMsg, setTyping } = useMessages([]);

  function handleSend(type, val) {
    if (type === 'text' && val.trim()) {
      appendMsg({
        type: 'text',
        content: { text: val },
        position: 'right',
      });

      setTyping(true);

      setTimeout(() => {
        appendMsg({
          type: 'text',
          content: { text: 'Bala bala' },
        });
      }, 1000);
    }
  }
```

A sent message appends with position right, the user's side, setTyping switches the typing indicator on, and a timeout appends the reply, the minimal loop of an assistant front end, with the reply source being whatever backend the implementer connects. A CodeSandbox demo hosts the complete example for immediate inspection.

## Install from npm, study in a Vite demo

Installation is the standard pair, npm install @chatui/core --save or yarn add @chatui/core, and the published artifact ships three flavors, a CommonJS lib directory, an ESM es directory and a UMD dist bundle reachable through unpkg and jsDelivr CDNs, so a script tag or a bundler both work. The stylesheet imports as @chatui/core/dist/index.css in the usage example, the styles compiled from Less sources in the repository. For studying the library itself, the demo directory is a Vite application started in three commands:

```bash
cd demo
npm i
npm run dev
```

The demo uses Vite while the library builds with Babel and Rollup, the split between a modern development playground and a conservative publication pipeline, and the build scripts enumerate the outputs, js:cjs, js:esm, build:types through tsc, build:css through lessc with postcss prefixing, and build:umd for the CDN bundle, the full multi-format packaging expected of a library consumed across toolchains.

## Theming, i18n and certified accessibility

Three of the six advertised features address who uses the interface rather than what it renders. Theming is described as powerful customization in every detail, with a dedicated Customize Theme guide on chatui.io, the styles built on CSS custom properties so a theme is variables rather than a fork. Internationalization supports dozens of languages through its own i18n guide. And the accessibility claim is unusual in its form, support certified by the Accessibility Research Association, an external attestation rather than a self-assessment, paired with keyboard and screen-reader behavior the certification implies. The remaining features, TypeScript typing, responsiveness and the extracted best practices, cover the developer side. The dependency list quietly reinforces the care, dompurify sanitizing rendered markup and intersection-observer for lazy behavior in older browsers, the unglamorous pieces a chat surface needs before it ships.

## Browser support with a stated IE11 escape hatch

The environment matrix names its floor, modern browsers supporting CSS Variables, with a documented browser table, Edge 16 and up, Firefox 31 and up, Chrome 49 and up, Safari 9.1 and up, iOS Safari 9.3 and up and Android WebView 6 and up. Internet Explorer 11 remains listed as supported with polyfills, and the README links the specific ones, a general polyfill set plus a CSS Variables polyfill, naming both ie11CustomProperties and css-vars-ponyfill as options, the level of specificity that saves the integration on the last legacy intranet. The matrix's age is itself information, Edge 16 as the Edge floor dates the list to the pre-Chromium years, consistent with a library that began in 2020 and keeps compatibility rather than chasing the current baseline, and for teams on greenfield browsers the requirement is trivially met, while teams supporting old Android WebViews find the floor written down.

## The polyfill and runtime dependency story

The package's runtime dependencies number five, and each answers a chat-specific problem. core-js with the Babel runtime supplies the standard-library backfill the broad browser matrix demands. dompurify sanitizes HTML rendered inside message bubbles, the chat UI's main injection surface when message content includes markup. intersection-observer polyfills the lazy-loading and visibility API for browsers below the library's floor. clsx handles conditional class composition, the small utility every component library carries. That is the whole list, no state manager, no router, no network layer, which matches the usage example where the backend integration is left to the application, the library is the surface and the conversation state is a hook the implementer owns. The devDependencies describe the toolchain, Babel with TypeScript presets, Rollup for UMD, Jest with a setup file for testing, husky with commitlint for commit discipline, the conventional Chinese-ecosystem repository of its generation.

## A quiet line worth knowing about

The maintenance picture should be stated for planning purposes. The GitHub release list carries a single tag, the 0.1.0 initial release of 2020-09-17, while npm publishes the working line, currently 3.7.0, and the repository's last push landed on 2026-03-30, six months before now, with a CHANGELOG recording the history. That is not abandonment, it is a mature library in low-motion maintenance, its API stable enough that releases are rare. For teams that need active development, newer alternatives exist, including TDesign's chat offerings that appear in the same searches, and the choice is between a settled, certified, well-documented kit and a faster-moving one. What ChatUI still offers is rare in combination, production chatbot patterns, certified accessibility, dozens of languages, theming over CSS variables, three package formats and a hook-first API, all in one small dependency whose behavior no longer surprises.

## Conclusion

Use ChatUI when a React application needs a chat surface with Chinese-market battle-testing behind it, theming down to detail and internationalization for dozens of languages out of one package. Choose a general chat-component kit when you need broader framework support or a larger community, or build directly on a headless library when the design language must be entirely custom. Verify first that your browser targets meet the CSS Variables requirement or plan the IE11 polyfill path, check the theme customization guide before overriding styles, and note the release cadence, one tag since 2020 with the last push on 2026-03-30, when planning long-term dependence.

## FAQ

### What is a chat UI?

A chat UI is the interface layer of a conversational application, the message list, bubbles, typing indicators, input box and quick replies a user interacts with. ChatUI is Alibaba's React library implementing that layer as components, with patterns drawn from the Alime Chatbot experience.

### How do you install ChatUI?

Run npm install @chatui/core --save or yarn add @chatui/core, then import Chat, Bubble and the useMessages hook from the package along with its dist/index.css stylesheet. A UMD bundle is also available on unpkg and jsDelivr for script-tag usage.

### Does ChatUI support Internet Explorer 11?

Yes, with polyfills. The library requires CSS Variables and lists IE11 as supported through a general polyfill set plus a CSS Variables polyfill such as ie11CustomProperties or css-vars-ponyfill, both named in the README. Modern browsers from Edge 16, Firefox 31, Chrome 49, Safari 9.1, iOS Safari 9.3 and Android WebView 6 are supported natively.

## Sources

- [alibaba/ChatUI on GitHub](https://github.com/alibaba/ChatUI)
- [License: MIT](https://github.com/alibaba/ChatUI/blob/master/LICENSE)
- [Project website](https://chatui.io)
- [README](https://github.com/alibaba/ChatUI/blob/master/README.md)
- [Releases](https://github.com/alibaba/ChatUI/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/alibaba-chatui