# Обзор интерфейса

- Human documentation: [https://docs.univer.ai/ru-RU/guides/sheets/ui/overview](https://docs.univer.ai/ru-RU/guides/sheets/ui/overview)

- Agent Markdown: [https://docs.univer.ai/ru-RU/guides/sheets/ui/overview.md](https://docs.univer.ai/ru-RU/guides/sheets/ui/overview.md)

- Requested language: `ru-RU`

- Content language: `ru-RU`

- Documentation version: `1.2.0`

- Source: [sheets/ui/overview.ru-RU.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/ui/overview.ru-RU.mdx)

---

## Архитектура

Базовый UI Univer спроектирован в соответствии со следующей схемой:



Различные плагины добавляют в эту основу функции и представления, которые в итоге образуют полноценное приложение.

## Система дизайна

Система дизайна Univer построена на Tailwind CSS и содержит набор дизайн-токенов, которые повторно используются движком отрисовки. Это обеспечивает единообразие стилей между движком отрисовки и слоем представления. Чтобы настроить стили приложения, можно изменить эти токены, хранящиеся в пакете `@univerjs/themes`.

- [Темы и тёмный режим](https://docs.univer.ai/ru-RU/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/ru-RU/guides/sheets/ui/components.md)

- [Значки](https://docs.univer.ai/ru-RU/guides/icons.md)

## Порядок меню и сеточная раскладка

[`order`, `gridLayout` и `updateMenuConfig()`](https://docs.univer.ai/ru-RU/guides/sheets/features/core.md#menu-order-and-grid-layout) задают порядок вкладок, групп и пунктов, положение в сетке и обновление во время работы. В руководстве также есть ссылки на параметры Facade для своих меню.