# UI 概览

- Human documentation: [https://docs.univer.ai/zh-CN/guides/slides/ui/overview](https://docs.univer.ai/zh-CN/guides/slides/ui/overview)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/slides/ui/overview.md](https://docs.univer.ai/zh-CN/guides/slides/ui/overview.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [slides/ui/overview.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/ui/overview.zh-CN.mdx)

---

## 架构

Univer 的 UI 基座基于下图设计：

#### UI workbench slot tree

- `CUSTOM_HEADER`
- `TOOLBAR` and `HEADER_MENU`
- `LEFT_SIDEBAR`
- `HEADER`
- `CONTENT`
- right sidebar service
- `FOOTER`
- `GLOBAL`
- `FLOATING` portal

Register extensions with `IUIPartsService.registerComponent(part, factory)`.

通过不同的插件相结合，向基座中添加各种功能和视图，最终形成一个完整的应用。

## 设计系统

Univer 的设计系统基于 Tailwind CSS 构建了一系列的设计 Tokens，这些 Tokens 会被渲染引擎复用，以确保渲染引擎与视图层的样式一致。你可以通过修改这些 Tokens 来定制你的应用的样式，Tokens 被存储在 `@univerjs/themes` 包中。

- [自定义主题与暗黑模式](https://docs.univer.ai/zh-CN/guides/fundamentals/ui/themes.md)

## 组件

Univer 使用了 React 组件来构建视图层，因此对于同样使用 React 的开发者来说，无论是使用 Univer 的组件还是注册自定义组件，都会是一件非常简单的事情。但这并不意味着你只能使用 React 来自定义组件，Univer 也提供了对其他框架的支持，比如 Vue（3.x 版本）和 Web Components。

所有的基础组件都被存放在 `@univerjs/design` 包中。图标组件被存放在 `@univerjs/icons` 包中。这些组件也可以独立于 Univer 单独使用。

自定义组件常用于以下场景：

* 在 Ribbon / Context Menu 中添加自定义按钮
* 在 Sidebar / Popup 等组件中集成自定义组件
* 替换内置组件

我们会在后续章节中详细介绍如何注册和使用自定义组件。

- [自定义组件](https://docs.univer.ai/zh-CN/guides/slides/ui/components.md)

- [图标](https://docs.univer.ai/zh-CN/guides/icons.md)