Introduction
TechUI Component Series is a next-generation frontend component ecosystem built specifically for Vue 3.
These component libraries are not just UI libraries, but a complete solution focused on Data Visualization and Sci-Fi Style Interfaces. From underlying atomic components to visualized dynamic SVG UI components, TechUI is dedicated to helping developers build cinematic, futuristic interfaces in the most elegant way.
Design Philosophy
In software engineering, Quality (Good), Speed (Fast), and Cost (Cheap) constitute an impossible triangle. TechUI honestly faces this law and offers you two paths through a layered architecture:
- Time for Cost (The Path of Craftsmanship)
- By combining the free Base (Foundation), Scifi (Visual), and Admin (Business) libraries, you can build high-quality systems at zero financial cost, but you need to invest time in handling the glue logic.
- Budget for Efficiency (The Path of Efficiency)
- By subscribing to Prime, you get a fully encapsulated business loop and an exclusive advanced engine, directly purchasing "time".
Whichever path you choose, TechUI's pursuit of "High Quality" never compromises.
Ecosystem Architecture
TechUI is not a monolith, but a refined ecosystem composed of multiple independent NPM packages with clear functions:
| Layer | Package Name | Positioning | Keywords |
|---|---|---|---|
| Prime Layer | @techui/prime | All-Round Commander | Paid, Wasm Engine, 3D, Out-of-the-Box |
| Business Layer | @techui/admin | Business Skeleton | Free, Workbench, Auth, Route Framework |
| Visual Layer | @techui/scifi | Visual Skin | Free, Dynamic SVG, FUI, Data Large Screen |
| Base Layer | @techui/base | Cornerstone | Free, Atomic Components, Forms, Adaptation |
In addition, powerful infrastructure supports the above components:
- @techui/utils: Contains the TuiAdaptive adaptation core and various low-level tools.
- @techui/libs: A collection of third-party dependencies that have undergone deep customization and version locking (Dependency Governance).
Tech Stack
TechUI stands on the shoulders of giants, built with the most cutting-edge technologies:
- Framework: Vue 3 + Vite
- Core Engine: Rust + WebAssembly (Used for high-density computing and security verification)
- Styling: Less + CSS Variables (Dynamic Theme System)
- Visualization: SVG (Dynamic Vectors)
Unique R&D Mode
TechUI is the product of deep collaboration between an "Independent Developer + AI".
As of January 2026, all architectural design and code implementation of the project are independently led by the author aYin, with AI (Claude & Gemini) deeply participating in development.
- Claude: Assisted in completing about 60% of complex component logic and type definitions.
- Gemini: Responsible for the vast majority of technical documentation construction, code review, and multi-language translation.
This mode ensures that TechUI possesses both human aesthetics and creativity, as well as high code quality and detailed documentation empowered by AI.