Skip to content

Component Badges

When browsing the TechUI component documentation, you will see specific Badge indicators next to the titles of some components.

TechUI always upholds the principles of honesty and respect. To clarify component ownership and design sources, we have established the following badge standards.

Badge Meanings

Badge (Type)DescriptionApplicable Scenarios / Properties
🏆 Industry PioneerindDisruptive Innovation:
Indicates pioneering significance within
the entire frontend industry,breaking existing
technical boundaries or interaction patterns
(e.g., Frontend License).
danger
(Highlight Alert)
👑 Pioneer1stTechUI Exclusive Invention:
Indicates the concept or implementation is
an industry first,and the code is completely
self-developed by the TechUI team. Represents
core innovation capability.
warning
(Gold Quality)
🏅 OriginaloriSelf-Developed Code:
Although similar functions exist in the industry,
it is independentlydesigned and written by
TechUI, with 100% self-developed code.
warning
(Quality Assurance)
⭐ StarstarHighly Recommended:
Refers to core benchmark components with
excellent community feedback,most complete
functionality, or high usage frequency.
danger
(Key Focus)
💎 AdvancedadvHigh-Value Component:
Belongs to flagship components or specific
advanced feature sets,involving core business
logic or complex underlying technology.
primary
(Professional Authorization)
🧬 Ported from [Lib Name]portTribute & Replica:
Deeply referenced and ported from other
excellent open-source libraries.The original
author's copyright notice is retained and adaptation
optimizations are made during porting.
primary
(Open Source Compatible)
🧊 EnhancedenhDeep Customization:
Deep secondary development based on mature
third-party libraries, simplifyingcumbersome
configurations and injecting TechUI visual genes
to achieve out-of-the-box usage.
primary
(Usability Enhancement)
🧪 ExperimentexpExperiment Component:
First release, still in the testing phase. Component
contentsuch as appearance and Props may
change at any time. Use with caution.
success
(Subject to Change)
💛 Contributed by [Author]contCommunity Contribution:
Indicates the component was contributed by a
community developer.If self-developed by the
contributor, it will be marked as
Original Contribution by [Author].
important
(Honorary Contribution)
⚡ WASM PoweredwasmHigh-Performance Core:
Indicates the component's core calculation logic
is written in Rustand compiled to Wasm,
possessing extreme performance.
info
(Hardcore Tech)
🧊 WebGL/3Dgl3D Rendering:
Indicates the component relies on Three.js or
native WebGLcontext. Usually has certain
requirements for the graphics card and belongs
to heavy visualization components.
info
(Visual Engine)
🎨 Pure CSScssLightweight:
Indicates the component is implemented entirely
by CSS/SVG with no orminimal JS logic. Zero
dependencies, extremely low rendering overhead,
suitable for static decoration.
success
(Lightweight Efficient)
🧠 Logic OnlylogicNo UI:
Indicates this is a "headless" component or Hooks,
providing onlyinteraction logic or data processing
capabilities, without specific UI styles.
warning
(Underlying Capability)
🆕 New
new
Recently Released:
Indicates the component is a new member added
within the last 1-2 minor versions.Used to quickly
attract user attention in the sidebar or lists.
danger
(Fresh Release)
⏳ Legacy
leg
End of Maintenance:
Indicates the component has reached the end
of its lifecycle and will be removedin a future version.
It is recommended not to use it in new features and
to migrate to alternatives as soon as possible.
default
(Gray/Outdated)
⛔ Deprecated
dep
End of Maintenance:
Indicates the component is no longer recommended
for use and may be removedin a future version. Alternatives or migration guides are usually provided.
default
(Gray/Outdated)

Unbadged Components

You will find that the vast majority of basic components in the TechUI component library (such as Button, Input, Layout, etc.) do not have any badges.

This does not represent plagiarism ("grab-ism"), but stems from the universality of design patterns.

In the long history of frontend UI development, the interaction paradigms of many basic components have converged, making it difficult (and unnecessary) to trace their earliest origins:

  • Row+Col (Grid): First popularized by Bootstrap, now a standard feature of all UI libraries.
  • Tree / Message: Interaction logic is deeply influenced by pioneers like Element UI.
  • Button / Form: Belong to wrappers of Web standard controls.

For these highly generalized components, TechUI adopts the approach of "Reference Industry Standards + Independent Implementation Code", so no separate source badge is added.

Future & Ecosystem Strategy

TechUI's vision is to build an all-encompassing component ecosystem.

To allow the TechUI base library to quickly meet complex business needs, in future iterations, we may adopt a "Grab-ism" strategy—directly porting some market-proven, excellent open-source components (such as complex date pickers, rich text editors, etc.).

For such ported components, we will strictly abide by open-source licenses and mark them as Ported from [XXX] in a prominent position in the documentation to pay the highest tribute to the original authors.

We believe that only by standing on the shoulders of giants can we see further.

Released under the MIT License.