UI Overview

Architecture

The UI base of Univer is designed based on the following diagram:

By combining different plugins, various functionalities and views are added to the base, ultimately forming a complete application.

Design System

Univer's design system is built on Tailwind CSS, creating a series of design tokens that are reused by the rendering engine to ensure consistent styling between the rendering engine and the view layer. You can customize your application's styles by modifying these tokens, which are stored in the @univerjs/themes package.

Components

Univer uses React components to build the view layer, making it very easy for developers who also use React to either use Univer's components or register custom components. However, this does not mean you can only use React to create custom components; Univer also supports other frameworks, such as Vue (version 3.x) and Web Components.

All basic components are stored in the @univerjs/design package, and icon components are stored in the @univerjs/icons package. These components can also be used independently of Univer.

Custom components are often used in the following scenarios:

• Adding custom buttons in Ribbon / Context Menu
• Integrating custom components in Sidebar / Popup, etc.
• Replacing built-in components

We will provide detailed instructions on how to register and use custom components in the following chapters.