Skip to content

@TechUI/Base Introduction

TechUI Base (Base Component Library) is the underlying cornerstone of the TechUI ecosystem and the atomic-level UI library for building modern web applications.

If Admin is the skeleton and Scifi is the skin, then Base is the cell. it is a collection of basic components developed based on Vue 3, designed to meet the core requirements of form handling, data display, and basic interaction within the TechUI framework. Currently, it supports the operation of the entire TechUI superstructure.

In one sentence: The foundation of the TechUI skyscraper, providing the purest atomic components.

Free Component Library

To lower the entry barrier for developers and give back to the community, @techui/base fully supports free commercial use when used independently.

  • Core Foundation: It is a common dependency of Admin and Prime, sharing the same DNA.
  • No Forced Key: Can be used directly without purchasing a License Key.
  • Closed Source but Open: Provides standardized API interfaces to serve the entire ecosystem.

💡 The Only Constraint

When using the free version of Base, please retain the copyright output information in the Console and at the end of the HTML.

"TechUI Base supports free commercial applications. Powered by a built-in Wasm licensing mechanism, upgrading to a formal license grants you exclusive access to 6 advanced components, taking your project's capabilities to the next level.

Revolutionary Adaptation

In the Base component library, we have built-in the proud TuiAdaptive component—the most powerful adaptive/scaling solution on the market today.

It adopts an equal-ratio scaling scheme, completely solving the adaptation difficulties of large screens and management backends under different resolutions.

  • Multiple Adaptation Modes: Perfectly adapts to full screen, wide screen, browsers with zoom, and various other scenarios.
  • GIS/Map Exclusive Optimization:
    • Solves the industry pain point where traditional transform scaling causes click coordinate offsets in map components such as Cesium/Leaflet.
    • Original "Synchronous Penetration Container" technology ensures that map interaction remains precise even in a scaled state.
  • Drag Mode: Supports activating drag debugging via browser zoom functions, making the restoration of design drafts no longer painful.

Development Status

Unlike the "install and use" nature of Admin, Base is currently in an ⚠️active development and rapid iteration phase. We value transparency, so we need to inform you:

  • 🚧 In Iteration: It does not yet cover all extreme usage scenarios; some functions are still being polished.
  • ⚡ Positioning Difference: At this stage, it aims to meet internal TechUI requirements and cannot fully replace mature general-purpose open-source UI libraries like Element Plus.
  • 🔄 API Changes: Before the official version is released, APIs and component interfaces may change.

Ecological Dependencies

Base does not exist in isolation; it aggregates the common capabilities of the TechUI ecosystem's bottom layer, shielding you from underlying complexity:

  • @techui/fonts: A unified font library ensuring consistency, introducing open-source free Chinese fonts, with built-in font selection and preview functions.
  • @techui/icons: An icon library designed and organized by TechUI, with built-in icon preview and selection functions.
  • @techui/colors: A unified color system ensuring visual consistency, with built-in color table preview and selection functions.
  • @techui/themes: A flexible theme system supporting dark/light mode switching.
  • @techui/locales: Built-in internationalization support to handle multi-language environments.
  • @techui/utils: Integrated with a large number of high-frequency utility functions.
  • @techui/libs: Integrated with a large number of third-party library encapsulations (to prevent TechUI component library anomalies caused by breaking updates).
  • @techui/lessmixins: Provides a powerful set of LESS mixin libraries to improve style development efficiency.

Applicable Scenarios

@techui/base strips away business logic and sci-fi special effects, returning to the most simple interactive essence, suitable for:

  • Building Custom Component Libraries: Use Base as a foundation to encapsulate your company's internal UI library.
  • Lightweight Application Development: Scenarios that do not require complex backend templates but only basic UI elements.
  • Learning and Research: Study how TechUI handles responsive layouts and basic interactions.

Relationships

Base is the bottom layer of the entire TechUI pyramid, supporting all high-level libraries upwards:

  • Base (This Library): npm i @techui/base -> Provides basic atomic components + TuiAdaptive -> Free commercial use.
  • Admin: Depends on Base -> Provides a complete backend management system skeleton -> Free commercial use.
  • Prime: Depends on Base -> Provides sci-fi visuals and 3D engines -> Requires paid authorization.

License

TechUI license categories are divided into:

  • Dual-heavy License: Two-way joint decryption, client key + Npm keychain.
  • Lite License: Single keychain, client key.

The Base component library adopts a light license with a one-way verification mechanism. Its core Wasm module directly decrypts and verifies the passed-in license string, ensuring lightweight deployment of the system.

  • Convenience: No need to introduce additional key packages, simple configuration.
  • Compatibility: Supports free mode; automatically switches to the free version status when no valid license is detected.

🚀 Start Exploring

If you need a Vue3 base library that is extremely friendly to GIS map components and possesses powerful adaptive capabilities, @techui/base is worth a try.

Released under the MIT License.