uView Pro X 1.0.0 Brings 80+ Native-Rendered Components to uni-app x's Vapor Mode

uView Pro X 1.0.0 Released: Full Support for uni-app x Vapor Mode, 80+ Components

uView Pro X 1.0.0 has been officially released, complete with a full demo project, documentation site, and DCloud plugin marketplace listing.

uView Pro X is the uni-app x version of uView Pro. The App side runs under Vapor mode (蒸汽模式) and works via native rendering. The first batch of components is divided into seven categories: base, form, data, feedback, layout, navigation, and other. They support quick copy of code, and the documentation is bilingual (Chinese and English).

If you are using uni-app x to build App, or have a uni-app project ready to migrate, you can directly use this to build pages: multiple themes, dark mode, and multiple languages are all built in, and you only need a simple configuration to quickly write components.

Component Overview

The first batch of components is divided into seven categories, corresponding to 61 example pages. The documentation site's left menu and the demo project's home page use the same set of categories, making it fast to find components.

Base Components (8)

Base components are basically the most common atomic elements in pages, such as buttons, icons, and images.

Component	Description
`ux-icon` Icon	Font-based icon set
`ux-image` Image	Fade-in animation, loading, failure prompts, rounded corners
`ux-button` Button	Multiple themes, sizes, ripple
`ux-cell` Cell	List group display
`ux-badge` Badge	Numbers, dots, preset types
`ux-tag` Tag	Multiple types, shapes, closable
`ux-text` Text	Multiple formatting modes
`ux-avatar` Avatar	Image, text, gender/level badge

组1.png

Form Components (13)

Input, selection, and validation are all in this group, commonly used in login, registration, and profile editing pages.

Component	Description
`ux-form` Form	Validation, reset, custom rules
`ux-input` Input	Multiple types and sizes
`ux-textarea` Textarea	Character count, auto-height, borders, disabled
`ux-search` Search	Clear, search, custom events
`ux-select` Column Selector	Single-column, multi-column, multi-column linkage
`ux-picker` Picker	Data passed externally, single-column, multi-column, cascading
`ux-rate` Rate	Click, slide, half-star, custom colors
`ux-number-box` Stepper	Step size, range limits, disabled
`ux-slider` Slider	Step size, custom range, colors
`ux-switch` Switch	Custom colors, sizes, values
`ux-checkbox` Checkbox	Multi-select, disabled, custom colors
`ux-radio` Radio	Only one can be selected in the same group
`ux-keyboard` Keyboard	Numbers, ID card, license plate

组2-1.png

组2-2.png

Data Components (5)

Number roll, countdown, progress bars, and other dynamic effect elements.

Component	Description
`ux-line-progress` Line Progress	Theme, stripes, custom colors
`ux-circle-progress` Circle Progress	Theme colors, custom size, dynamic progress
`ux-count-to` Number Roll	Thousands separator, decimals, easing
`ux-count-down` Countdown	Chinese, colon separator, borders
`ux-swiper` Swiper	Multiple indicators, 3D effects, autoplay

组3.png

Feedback Components (14)

Dialogs, prompts, and status fallbacks, the largest group.

Component	Description
`ux-action-sheet` Action Sheet	Pop up option list from bottom
`ux-toast` Toast	Multiple themes, positions, loading animations
`ux-notice-bar` Notice Bar	Horizontal, vertical scrolling
`ux-alert-tips` Alert Tips	Four themes, closable
`ux-top-tips` Top Tips	`show()` popup, auto dismiss
`ux-collapse` Collapse	Accordion, custom titles, disabled
`ux-popup` Popup	Multiple directions: up, down, left, right, center
`ux-swipe-action` Swipe Cell	Swipe left to reveal action menu
`ux-modal` Modal	Message prompts, action confirm, async close
`ux-mask` Mask	Background cover for popups
`ux-loading` Loading	Circle, flower two modes
`ux-loadmore` Load More	Loading, no more, dot styles
`ux-empty` Empty	Built-in over ten scene icons
`ux-no-network` No Network	Automatically detects network status

组4.png

Layout Components (6)

Card, grid, and grid system components for building page skeletons.

Component	Description
`ux-line` Line	Divides content blocks
`ux-card` Card	Header, body, footer slots, rounded corners, shadow, borders
`ux-grid` Grid	Column count, borders, alignment
`ux-divider` Divider	Separates content
`ux-layout` Grid Layout	12-column layout, used with `ux-row` / `ux-col`
`ux-section` Section Title	Supports "view more" jump

组5.png

Navigation Components (8)

Top and bottom navigation, in-page tabs, and pagination.

Component	Description
`ux-tabbar` Tab Bar	Icons, text, raised buttons
`ux-back-top` Back to Top	Rounded corners, circle two shapes
`ux-navbar` Nav Bar	Custom content, back events, gradient backgrounds
`ux-tabs` Tabs	Scrolling, badges, custom colors
`ux-subsection` Subsection	Button, segment modes, animations
`ux-steps` Steps	Dot, number modes, horizontal/vertical directions, custom colors
`ux-link` Link	Multi-platform jumps and custom styles
`ux-pagination` Pagination	Icon, text buttons, custom styles

组6.png

Other Components (7)

Corner but very useful auxiliary components.

Component	Description
`ux-gap` Gap Slot	Separates content blocks
`ux-safe-bottom` Safe Bottom	Adapts to iPhone X and similar devices
`ux-status-bar` Status Bar	Immersive adaptation of system status bar height
`ux-transition` Transition	Unified enter/exit animations
`ux-skeleton` Skeleton	Placeholder structure during page loading
`ux-full-screen` Full Screen Guide	Covers nav bar and tab bar
`ux-config-provider` Config Provider	Injects theme, dark, language config

组7.png

Note: 1.0.0 is only the first release, not all components are complete. Some components have not been migrated yet; they will be gradually added based on usage frequency. There will also be new feature components for specific scenarios. Each release will synchronously update the demo project and documentation site, so keep an eye out.

Supported Platforms

Platform	Status
App-Android	Adapted, verified on real device
App-iOS	Adapted
App-HarmonyOS	Adapted
H5	Adapted
WeChat Mini-program	Adapted

The App side runs under uni-app x's Vapor mode (蒸汽模式) compilation: the template and style are compiled into bytecode to directly drive native nodes, while the logic layer runs on a JS engine. UTS code is converted to JS via uts2js and runs together.

This is also the difference from uView Pro: this version is completely rewritten for native rendering, not a wrapper around old components.

On the App side, UCSS does not support pseudo-elements or CSS gap. The components have already been handled per-platform internally, but when writing page styles you need to avoid these; the specific red lines can be found in the "Notes" section of the documentation site.

Core Highlights

Multiple Themes: Change Skins Without Modifying Component Source

Themes are driven by a set of color tokens. Tokens are written to both color and CSS variables at runtime. Components only read tokens, so when you register a new theme, the entire library changes color.

import { useTheme } from '@/uni_modules/uview-pro-x'

const { currentTheme, themes, setTheme, darkMode, toggleDarkMode, isInDarkMode } = useTheme()

// Switch to custom theme
setTheme('purple')

The official blue theme is built in. You can register any number of themes, and the selection is automatically persisted locally (key uview-pro-x-theme), restored on next startup.

Dark Mode: Follow System or Manual Toggle

The same token system also has darkMode, taking values 'auto', 'light', 'dark'. When set to auto, it follows the system; when the system switches to dark, the library automatically enters dark mode without any page-level checks.

toggleDarkMode()      // One-click switch
setDarkMode('auto')   // Follow system
isInDarkMode()        // Whether currently dark

On switch, the dark palette for the current theme is recalculated and written back to global variables. The official blue theme comes with a dark palette, usable immediately after installation; custom themes also generate a dark palette according to rules.

Dark mode settings are persisted separately, independent of theme selection.

Multiple Languages: Built-in Chinese and English, Extensible

Built-in zh-CN and en-US language packs. Language packs are organized by namespace, support placeholder substitution, and the built-in component text follows the language switch.

import { useLocale } from '@/uni_modules/uview-pro-x'

const { t, locale, setLocale } = useLocale()

setLocale('en-US')

Language selection is also persisted (key uview-pro-x-locale). You can write your own language packs, plug them in on demand, and register them for use.

Examples and Documentation Match, Code Can Be Directly Copied

Each component documentation page has a demo entry at the top; scan or click to see the actual effect on a real device. The code posted under each example section below is the same as the one that runs in the demo project. You can change the text and copy it into your own page.

Property tables, event tables, and slot tables are also organized according to the actual component types and updated with the version. Copying code, checking effects, and looking up parameters all happen on the same page, no need to jump back and forth.

Native Rendering and Strong Typing

The components themselves are written in UTS. In Vapor mode, UTS is converted to JS via uts2js and runs in the same engine as the page code (the official documentation says: "Writing UTS will be compiled to JS engine via uts2js compiler"), so whether the page uses UTS or TS, JS can reference the components:

Page Writing	Experience
`<script setup lang="uts">`	Most complete type checks; wrong property names, event names, or slot names will be reported at compile time
`<script setup lang="ts">`	Components can still be referenced normally; props and events go through declarative boundaries; type hints are less complete than UTS pages, so following the API table is safer

Component Props, Events, and Slots all have UTS type definitions, with a unified type export at types/global.uts. UTS pages get this validation layer, while TS pages need to check the API table more carefully.

Vapor mode has several hard constraints: only the Composition API is allowed, mixins are not supported, and styles only recognize simple class selectors. This version has aligned with these constraints: all components use <script setup lang="uts">, class names follow BEM, no descendant selectors or pseudo-elements, and styleIsolation is unified to app-and-page, corresponding to style isolation strategy 2.0.

The demo project's manifest.json has vapor: true to enable Vapor mode.

Version-wise, Vapor mode requires HBuilderX 5.21+ (Android), 5.11+ (iOS), 5.0+ (HarmonyOS); mini-programs and web still run on VDOM, so components don't need changes.

Zero Third-party Runtime Dependencies

The plugin's built-in utility functions and hooks are all mounted on $u, with no extra runtime library. Common ones include $u.addUnit (adds units), $u.toStyle (style concatenation), $u.hexToRgba (color conversion), $u.deepMerge, $u.test (20+ regular expressions).

Common hooks include useTheme, useLocale, useBEM, useRect, useSafeArea, useCountDown, useThrottle, etc. Theme, internationalization, and layout measurement can be used directly.

Components are compiled on demand via easycom. Unused components do not enter the build output, optimizing package size.

AI Skills: Let Assistants Write Pages by Specification

This library comes with an Agent Skills package. After installing it into an AI coding assistant, the assistant will first consult API cards when writing ux-* pages, then run a validator after writing, reducing reliance on training memory to guess property names.

pnpx skills add uview-pro/skills

The skills include API cards for 77 components, page script and style red lines, a three-platform compatibility checklist, and a verify-ux-usage.mjs validation script that reports errors if properties or events are used incorrectly. Clients like Qoder, Claude Code, Cursor, and Trae that support skills can use it after installation. The skills package itself is open source at uview-pro/skills.

Why Choose It

In the uni-app x ecosystem, there are few component libraries that can be used directly, and even fewer with complete supporting resources. Common scenarios like login, forms, lists, pop-ups, and empty states are basically covered, so you don't have to piece together each page from scratch. Built-in themes, dark mode, and multiple languages save the time of configuring an additional solution.

If you are migrating a project to uni-app x, or planning to start a new x project, the interface layer can save most of the time.

Installation

Currently only supported via the DCloud plugin marketplace, not via npm:

Open the uView Pro X plugin page, select "Import to HBuilderX".
Choose the target uni-app x project and complete the import.
The plugin automatically lands in the project's uni_modules/uview-pro-x directory.

Installation directory structure:

your-project/
├─ uni_modules/
│  └─ uview-pro-x/
│     ├─ components/        # ux-* components
│     ├─ libs/              # utility functions and hooks
│     ├─ locale/            # built-in language packs
│     ├─ index.uts          # library entry
│     ├─ index.scss         # style entry
│     └─ theme.scss         # theme variables
├─ pages.json
├─ main.uts
└─ uni.scss

Quick Start

Only four steps to get it running; the code below can be copied directly.

Step 1: Configure easycom in pages.json so ux-* components are auto-scanned:

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^ux-(.*)": "@/uni_modules/uview-pro-x/components/ux-$1/ux-$1.uvue"
    }
  }
}

Step 2: Register the component library in main.uts. All parameters are optional; if not provided, it uses the official blue theme and zh-CN:

import App from './App.uvue'
import uViewProX from './uni_modules/uview-pro-x'
import { createSSRApp } from 'vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewProX, {
    locale: { defaultLocale: 'zh-CN' },
    darkMode: 'auto'
  })
  return { app }
}

Step 3: Import theme variables at the end of uni.scss:

@import '@/uni_modules/uview-pro-x/theme.scss';

Step 4: Use directly in a page:

<template>
  <view class="page">
    <ux-button text="主要按钮" type="primary" @click="onClick" />
    <ux-tag text="标签" type="success" />
  </view>
</template>

<script setup lang="uts">
function onClick(): void {
  uni.showToast({ title: '点击了按钮', icon: 'none' })
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  padding: 16px;
}
</style>

Running is the same as a regular uni-app x project: for H5 click "Run to Browser", for App connect a real device or simulator, for WeChat Mini-program configure the appid and then "Run to Mini-program Simulator".

Feedback

If you encounter issues during use, please feel free to reach out:

GitHub: anyup/hello-uview-pro-x, include device model and reproduction steps when submitting issues.
Gitee: gitee.com/anyup/hello-uview-pro-x
Official docs: x.uviewpro.cn, each component page has API tables and online previews, both in Chinese and English.
Plugin marketplace: DCloud official marketplace installation