# @chatscope/chat-ui-kit-react 中文文档

规范地址：https://npmcn.com/package/%40chatscope/chat-ui-kit-react/

版本：2\.1\.1
npm 元数据更新时间：2025-05-15T07:24:23.838Z
中文译文更新时间：2026-11-09T11:26:24.581Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40chatscope/chat-ui-kit-react
原文对照：https://npmcn.com/package/%40chatscope/chat-ui-kit-react/?lang=original
项目主页：https://chatscope.io/
源码仓库：https://github.com/chatscope/chat-ui-kit-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：719 kB，184 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：prop-types ^15\.7\.2，react ^16\.12\.0 \|\| ^17\.0\.0 \|\| ^18\.2\.0 \|\| ^19\.0\.0，react-dom ^16\.12\.0 \|\| ^17\.0\.0 \|\| ^18\.2\.0 \|\| ^19\.0\.0
- 首次发布：2020-09-22T13:52:37.225Z
- 最新版本发布：2025-05-15T07:24:23.673Z
- 近 30 天下载量：223390（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 0 个）

## 中文简介

创建聊天界面的响应组件库

## 安装

```sh
npm install @chatscope/chat-ui-kit-react
```

也可以使用：`pnpm add @chatscope/chat-ui-kit-react`、`yarn add @chatscope/chat-ui-kit-react`、`bun add @chatscope/chat-ui-kit-react`

## README

# 聊天UI Kit 反应

[![Actions Status](https://github.com/chatscope/chat-ui-kit-react/workflows/build/badge.svg)](https://github.com/chatscope/chat-ui-kit-react/actions) [![npm version](https://img.shields.io/npm/v/@chatscope/chat-ui-kit-react.svg?style=flat)](https://npmjs.com/@chatscope/chat-ui-kit-react) [![](https://img.shields.io/npm/l/@chatscope/chat-ui-kit-react?dummy=unused)](https://github.com/chatscope/chat-ui-kit-react/blob/master/LICENSE) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://chatscope.io/storybook/react/)

在几分钟内用 React 组件构建自己的聊天 UI .  
来自聊天镜的Chat UI Kit是开发网络聊天应用程序的开源UI工具包.

厌倦了与粘性卷轴条的挣扎 满足性,反应性,cs黑客?  
这是给你的! [见所有特性](https://chatscope.io/features)。 。 。 .

**聊天用户界面 Kit 以曲速带给您聊天 UI 开发** 🚀

## 演示

-   全功能聊天应用程序 : [https://demo.chatscope.io (英语)](https://demo.chatscope.io/)
-   佐伊,阿坎,艾略特和乔: [https://chatscope.io/demo/chat-friends (中文(简体) )](https://chatscope.io/demo/chat-friends/)
-   与火星人聊天(他有时有空): [https://mars.chatscope.io (中文(简体) )](https://mars.chatscope.io/)

演示文稿索引 : [https://chatscope.io/demo (英语)](https://chatscope.io/demo/)。 。 。 .

## 安装

**构成部分库**

使用线条 :

```sh
yarn add @chatscope/chat-ui-kit-react
```

使用 npm :

```sh
npm install @chatscope/chat-ui-kit-react
```

**样式**

使用线条 :

```sh
yarn add @chatscope/chat-ui-kit-styles
```

使用 npm :

```sh
npm install @chatscope/chat-ui-kit-styles
```

## 使用量

### 无害环境管理

```jsx
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;
```

对! 你的第一个聊天GUI准备好了!

### UMD 图像

UMD的用法在我们 [故事书](https://chatscope.io/storybook/react/)。 。 。 .

## 文档

检查一下我们的朋友 [故事书](https://chatscope.io/storybook/react/)。 。 。 .

## 字体

文库以Javascript写出,但自1.9.3版本起,打字机可以在包中提供.

## 另见

[@ catascope/ use- 聊天器](https://github.com/chatscope/use-chat) 是聊天应用程序中用于状态管理的反应钩子 .  
看看这个,看看自己能有多容易做到聊天逻辑.

## 显示您的支持

如果你做了一个很棒的聊天UI 你喜欢这个图书馆,请 这个仓库!

## 社区和支助

-   通过旋转 [@ 分镜](https://twitter.com/chatscope)
-   聊天时 [解析器](https://discord.gg/TkUYWQRf2M)
-   脸书在 [脸书](https://www.facebook.com/chatscope)
-   文章 [聊天镜博客](https://chatscope.io/blog/)

## 网站

[https://chatscope.io (英语)](https://chatscope.io/)

## 许可证

[麻省理工学院](https://github.com/chatscope/chat-ui-kit-react/blob/master/LICENSE)

## 常见问题

### @chatscope/chat-ui-kit-react 是什么？

创建聊天界面的响应组件库

### 如何安装 @chatscope/chat-ui-kit-react？

在项目目录运行 npm install @chatscope/chat-ui-kit-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（^15\.7\.2）、react（^16\.12\.0 \|\| ^17\.0\.0 \|\| ^18\.2\.0 \|\| ^19\.0\.0）、react-dom（^16\.12\.0 \|\| ^17\.0\.0 \|\| ^18\.2\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @chatscope/chat-ui-kit-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @chatscope/chat-ui-kit-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @chatscope/chat-ui-kit-react 可以商用吗？

@chatscope/chat-ui-kit-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @chatscope/chat-ui-kit-react 的下载量有多少？

根据 npm 官方下载统计，@chatscope/chat-ui-kit-react 在 2026/10/10 – 2026/11/08 这 30 天内被下载 223,390 次，日均约 7,446 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chatscope/chat-ui-kit-react 还在维护吗？

最新版本 2\.1\.1 发布于 2025/05/15（1\.5 年前）；至今共发布 38 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/09/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。