# @douyinfe/semi-ui-19 中文文档
规范地址：https://npmcn.com/package/%40douyinfe/semi-ui-19/
版本：2\.105\.0
npm 元数据更新时间：2026-11-12T09:50:26.819Z
中文译文更新时间：2026-11-12T18:11:46.803Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40douyinfe/semi-ui-19
原文对照：https://npmcn.com/package/%40douyinfe/semi-ui-19/?lang=original
项目主页：https://semi.design/
源码仓库：https://github.com/DouyinFE/semi-design
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：61.7 MB，2373 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.0\.0
- 运行依赖：36 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2025-09-29T07:27:44.594Z
- 最新版本发布：2026-11-12T09:50:26.538Z
- 近 30 天下载量：19469（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：53（近 12 个月 46 个）
## 中文简介
一个现代化,全面,灵活的设计体系和UI库. 连接设计Ops & DevOps. 快速建立美丽的React应用程序. 由杜殷夫团队维护. (反应19相容)
## 安装
```sh
npm install @douyinfe/semi-ui-19
```
也可以使用：`pnpm add @douyinfe/semi-ui-19`、`yarn add @douyinfe/semi-ui-19`、`bun add @douyinfe/semi-ui-19`
## README
# 半UI级
一个现代化,全面,灵活的设计体系和UI库. 连接设计Ops & DevOps. 快速建立美丽的React应用程序. 由杜殷夫团队维护.
[](https://github.com/DouyinFE/semi-design/blob/main/LICENSE) [](https://www.npmjs.com/package/@douyinfe/semi-ui) [](https://github.com/DouyinFE/semi-design/graphs/contributors)  [](https://www.figma.com/@semi) [](https://app.codecov.io/gh/DouyinFE/semi-design) [](https://www.chromatic.com/) [](https://dashboard.cypress.io/projects/k83u7j/runs) [](https://twitter.com/SemiDesignUI)
# \* 特性
- QQ 最多70+高品质组件.
- QQ 代码2 设计, 根据不同主题自动生成 Figma UI Kit, 在设计和代码之间保持不变
- \* 强大的设计2 代码支持, 在几秒钟内将 figma 草稿转换为代码
- +++ 完整 A11y 支持,遵循 W3C 标准,为所有组件提供键盘交互、焦点管理和 ARIA
- QQ上到3000+ Design Tokens可以很容易地由半设计系统管理来修改,使"半设计"迅速变成"Any Design".
- \* 支持数十种语言、时区、RTL支持的国际化
- \* 严格质量保证,涵盖单位测试、E2E测试、视觉测试
- QQ 写入 Typescript, 友好的静态类型支持 。 以基金会/Adapter建筑为基础,易于阅读并作出贡献
- QQ SSR(服务员侧面渲染)相容.
# QQ 安装
```sh
# with npm
npm install @douyinfe/semi-ui
# with yarn
yarn add @douyinfe/semi-ui
```
# 使用量
这里有一个简单的例子 让你开始, 这是你所需要的:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Switch } from '@douyinfe/semi-ui';
const App = () => (
<>
);
ReactDOM.render(, document.querySelector('#app'));
```
还有 [半 UI 多克站点](https://semi.design/en-US/) 有上百个可以编辑的例子和现场预览, 欢迎播放这些例子.
# 关于半UI的新闻
- [追踪微博](https://twitter.com/SemiDesignUI)
- [中继](https://medium.com/@semi-design)
- [跟踪Dev.to](https://dev.to/semidesign)
# 页:1
- [半个 DSM](https://semi.design/dsm)
- [半设计2Code](https://semi.design/code/en-US)
- [半图像插件](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81)
- [快速启动](https://semi.design/en-US/start/getting-started)
- [构成部分概览](https://semi.design/en-US/start/overview)
- [自定义主题](https://semi.design/en-US/start/customize-theme)
- [设计托肯斯](https://semi.design/en-US/basic/tokens)
- [黑暗模式](https://semi.design/en-US/start/dark-mode)
- [半图标](https://semi.design/en-US/basic/icon)
- [全球配置](https://semi.design/en-US/other/configprovider)
- [国际化](https://semi.design/en-US/other/locale)
- [财务问题](https://semi.design/en-US/start/faq)
- [变化](https://semi.design/en-US/start/changelog)
# ++ 平台支持
半UI支持所有主要的现代浏览器.
| [](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/chrome/chrome.png)
铬 | [](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/firefox/firefox.png)
火花 | [](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/safari/safari.png)
萨法里 | [](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/edge/edge.png)
电子/电子 | [](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/70.4.0/electron/electron.png)
电子 |
| --- | --- | --- | --- | --- |
| 最近两个版本 | 最近两个版本 | 最近两个版本 | 边缘 | 最近两个版本 |
# QQ 用户组
联合 [用户组](https://bytedance.feishu.cn/docs/doccnw93Dujm3UCkHRDTMTm1qwe#) 飞翔/拉克
# 谢谢
[](https://www.chromatic.com/)
感谢 [色谱](https://www.chromatic.com/) 提供视觉测试平台 帮助我们审查UI的变化 并捕捉视觉回归.
[](https://www.cypress.io/)
感谢 [齐压](https://www.cypress.io/) 用于提供E2E测试.
## 捐款
多亏了所有已经出力的人!
[](https://github.com/DouyinFE/semi-design/graphs/contributors)
阅读贡献指南以了解我们的开发过程,如何提出错误修正和改进,以及如何构建和测试您对Semi UI的修改.
见 [捐款](https://npmcn.com/package/%40douyinfe/semi-ui-19/CONTRIBUTING-en-US.md) 文档.
# 许可证
半UI为 [麻省理工学院](https://npmcn.com/package/%40douyinfe/semi-ui-19/LICENSE)
## 常见问题
### @douyinfe/semi-ui-19 是什么？
一个现代化,全面,灵活的设计体系和UI库\. 连接设计Ops & DevOps\. 快速建立美丽的React应用程序\. 由杜殷夫团队维护\. \(反应19相容\)
### 如何安装 @douyinfe/semi-ui-19？
在项目目录运行 npm install @douyinfe/semi-ui-19，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @douyinfe/semi-ui-19 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @douyinfe/semi-ui-19 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @douyinfe/semi-ui-19 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=18\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @douyinfe/semi-ui-19 可以商用吗？
@douyinfe/semi-ui-19 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @douyinfe/semi-ui-19 的下载量有多少？
根据 npm 官方下载统计，@douyinfe/semi-ui-19 在 2026/10/13 – 2026/11/11 这 30 天内被下载 19,469 次，日均约 649 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @douyinfe/semi-ui-19 还在维护吗？
最新版本 2\.105\.0 发布于 2026/11/12（1 天前）；至今共发布 53 个版本，其中过去 12 个月发布了 46 个；首次发布于 2025/09/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。