Ecosystem Overview
TechUI is not a single, monolithic library, but a refined ecosystem composed of modular and hierarchical Npm packages.
This design follows the principle of "Separation of Concerns":
- If you only need basic components, there is no need to load the heavy sci-fi engine.
- If you only need to process color data, there is no need to import Vue framework code.
The entire ecosystem is divided into the following six major sectors, which you can consult based on your needs.
Component Libraries
The core interaction layer of TechUI, containing a complete echelon from atomic elements to flagship solutions.
| Package | Description | License |
|---|---|---|
| @techui/prime | Prime Edition. Integrates the robustness of Base, the business logic of Admin, and the visuals of Scifi.Supports Wasm core and heavy licensing mechanisms. | 💎 Paid |
| @techui/admin | Business Mid-platform. Provides standard tables, forms, modals, and layout containers to build the skeleton of complex backend systems. | 🆓 Free |
| @techui/base | Underlying Foundation. The purest Vue3 atomic component library, including the TuiAdaptive engine; it is a common dependency for upper-level libraries. | 🆓 Free |
| @techui/scifi | Sci-Fi Visuals. A decorative component library based on a dynamic SVG engine, providing movie-grade visual effects for large-screen applications. | 🆓 Free |
Icons and Fonts
The visual asset layer, dedicated to finding the perfect balance between "High-Definition Display" and "Loading Performance".
- @techui/icons: Employs an extremely compressed Woff2 WebFont solution. It includes TechUI's original default library and a deeply customized library based on IBM Carbon. It also features a built-in interactive preview tool.
- @techui/fonts: A typography aesthetics resource pack. It provides "on-demand" Chinese fonts (such as LXGW WenKai and Source Han Sans) and "combined" English/Numeric fonts (Scifi Fonts).
Styles and Themes
The visual management layer, controlling the design language of the entire application through a data-driven approach.
- @techui/themes: A Data-Driven Theme System. It supports runtime switching and drives both DOM elements and Canvas charts (ECharts) simultaneously via dual channels (CSS variables + JS state).
- @techui/colors: A Color Semantic System. Built on the HSL model, it provides two palettes: V1 (UI Design) and V2 (Data Visualization), supporting natural semantic calls.
- @techui/lessmixins: A CSS Accelerator. It provides a large number of Less shorthand syntaxes (such as
.bd,.wh) and common layout encapsulations, significantly improving style writing efficiency.
Utility Libraries
The logic support layer, providing lightweight, high-performance underlying functions for upper-level business logic.
- @techui/utils: TechUI's "Swiss Army Knife". It encapsulates DOM operations, local storage management, strict type detection, and core ecosystem methods (such as theme registration
tTheme).
Internationalization (i18n)
The globalization layer, helping applications go global.
- @techui/locales: A high-performance i18n resource pack. It supports code splitting and on-demand loading, automatically detecting the environment and loading only the language slices required by the user (CN/HK/EN).
Third-Party Libraries
The dependency governance layer, ensuring the long-term stability of the ecosystem.
- @techui/libs: A Dependency Integration Hub. It collects and locks the versions of core third-party dependencies such as
dayjs,chroma.js, andasync-validator. Some libraries include source-level customizations specifically for TechUI.
Security and Special Libraries
These libraries do not provide direct UI interfaces or general utility functions; rather, they exist as underlying security dependencies for the TechUI commercial licensing system. They typically handle encryption, verification, and authorization logic.
- @techui/prime-keychain: The Core Keyring. This is the "Physical Public Key" for the Prime edition. It contains no visual components but stores obfuscated public key fragments and Wasm verification seeds. As a key part of the Two-Factor Decryption mechanism, it must exist alongside your Client Key (private credential) to activate the full functionality of Prime. (🔒 Proprietary Protocol)