Semi UI：抖音现代设计系统 React 组件库安装与使用指南

一、项目官方信息

Semi UI 是抖音开源的现代、全面、灵活的设计系统与 React 组件库，打通 DesignOps 与 DevOps，可快速构建美观的 React 应用。

二、官方图片

上图为 Semi UI 仓库在 GitHub 上的官方 Logo。

三、环境要求

• React 16.8+；
• Node.js 16+；
• npm/yarn。

四、安装步骤

1. 安装依赖

npm install @douyinfe/semi-ui

2. 引入样式

import '@douyinfe/semi-ui/dist/css/semi.min.css';

3. 使用组件

import { Button, Tag } from '@douyinfe/semi-ui';

function App() {
  return (
    <>
      <Button type="primary">主要按钮</Button>
      <Tag color="red">标签</Tag>
    </>
  );
}

4. 按需引入

配合 babel-plugin-import 或 ESM 自动 tree-shaking。

五、使用方法

• 丰富组件：按钮、表单、表格、导航、反馈等 60+；
• 主题定制：通过 Design Token 与官网主题编辑器换肤；
• 暗色模式：内置暗色主题；
• 国际化：内置多语言；
• 图标库：配套 Semi Icons。

六、常见问题 FAQ

1. Semi UI 是谁开源的？ 抖音前端团队。

2. 支持 React 几？ React 16.8+。

3. 怎么换主题？ 用官网主题编辑器导出 token，或 CSS 变量。

4. 有暗色模式吗？ 内置。

5. 组件多吗？ 60+ 高质量组件。

6. 支持 Tree-shaking 吗？ ESM 支持自动按需。

七、跳转链接

• GitHub 仓库：DouyinFE/semi-design
• 官网：semi.design
• npm：@douyinfe/semi-ui